Initial Commit

2026-05-26 16:04:14 +08:00
commit 5d6f228224
62 changed files with 10152 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+**/node_modules
+uploads
+data
+client/dist
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,168 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node
+
+### Project-specific ###
+# Uploaded files
+uploads/
+
+# Runtime data files
+data/*.json
+
+# Vite build output
+client/dist/
+
+# Environment files
+.env.*
+!.env.example
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Docker
+docker-compose.override.yml
+
+# Claude Code
+.claude/
--- a/DEVLOG.md
+++ b/DEVLOG.md
@@ -0,0 +1,265 @@
+# Playable Showcase — Dev Log
+
+## Project Overview
+
+Internal tool for uploading, previewing, and organizing HTML playable ads.
+Single-file HTML playables are uploaded, stored on disk, and served via Express.
+React SPA (Vite) for the frontend. JSON file-based DB (no SQL).
+
+**Stack:** Node.js + Express · React + Vite · React Router DOM · Multer · Puppeteer
+
+---
+
+## Architecture
+
+```
+PlayableShowcase/
+├── server/
+│   ├── index.js          — Express server (port 3000), serves /public and /uploads
+│   ├── db.js             — JSON file-based database (ads + apps)
+│   ├── routes/
+│   │   ├── ads.js        — GET/PATCH /api/ads/:id, POST /api/ads/:id/screenshot
+│   │   ├── upload.js     — POST /api/upload (multer, creates ad record)
+│   │   └── apps.js       — CRUD /api/apps, GET /api/apps/lookup
+│   └── utils/
+│       └── screenshot.js — Puppeteer headless screenshot utility
+├── client/
+│   ├── vite.config.js    — outDir: '../public' (matches Express static path)
+│   └── src/
+│       ├── App.jsx        — Routes: / (Catalog), /apps, /viewer/:id
+│       ├── api.js         — All fetch calls to Express API
+│       ├── components/
+│       │   ├── AppLayout.jsx/css   — Shared sidebar shell + mobile hamburger
+│       │   ├── AdCard.jsx/css      — Catalog grid card (thumbnail + app icon)
+│       │   ├── AppModal.jsx        — Create/edit application modal (shared)
+│       │   ├── MetadataModal.jsx   — Edit playable metadata in Viewer
+│       │   └── UploadPreviewModal.jsx/css — Upload flow modal
+│       └── pages/
+│           ├── Catalog.jsx/css     — Main grid + sidebar with search/filter
+│           ├── Viewer.jsx/css      — Playable preview with device frame
+│           └── Apps.jsx/css        — Application management page
+├── uploads/              — Uploaded HTML files + thumbnail PNGs
+└── public/               — Vite build output (served by Express)
+```
+
+---
+
+## Features Implemented
+
+### Catalog (`/`)
+- Grid of AdCards with thumbnails, app icon, title, app name
+- Sidebar: brand, upload button (hidden file input → UploadPreviewModal), app filter, search
+- Search filters by: title, developer, app name, tags
+- Apps sorted alphabetically in filter list
+
+### Viewer (`/viewer/:id`)
+- Device frame (phone/tablet/desktop) with scale-to-fit
+- Rotate frame button
+- Manual screenshot button (server-side Puppeteer)
+- Auto-screenshot on iframe load if no thumbnail exists
+- Sidebar: playable info, app icon + store links, repo@branch, tags, frame controls, edit button
+- MetadataModal for editing: title, app, tags, developer, repo, branch, notes, replace HTML file
+
+### Apps (`/apps`)
+- List all applications with icon, name, store links
+- Create/edit/delete apps
+- App Store / Play Store URL auto-fill (lookupApp API)
+
+### Upload Flow
+- Upload HTML → UploadPreviewModal opens
+- Left: live iframe preview of the playable
+- Right: metadata form (title, app, tags, developer, repo, branch, notes)
+- "Take Screenshot" button (required before Save) — calls Puppeteer server-side
+- "New Application" inline button opens AppModal without leaving the flow
+- Screenshot taken via server-side Puppeteer (not client-side canvas capture)
+
+### Mobile
+- Sidebar collapses to hamburger menu at ≤680px
+- Overlay closes sidebar when tapped
+- Upload preview frame uses aspect-ratio: 9/19.5
+
+---
+
+## Key Technical Decisions
+
+### Screenshot: Server-side Puppeteer (not client-side html2canvas)
+Client-side approaches (html2canvas, canvas.toDataURL) were tried and failed for various reasons:
+- html2canvas can't access iframe CSS from parent window context → HTML overlays invisible
+- WebGL `preserveDrawingBuffer: false` → canvas.toDataURL() always returns blank
+- Composite-canvas fallback only captures WebGL, misses HTML UI layers
+
+**Decision:** All screenshots go through `POST /api/ads/:id/screenshot` which runs Puppeteer.
+Puppeteer captures the GPU-composited output, getting WebGL + HTML overlays correctly.
+
+### Vite Build Output
+`vite.config.js` sets `build: { outDir: '../public', emptyOutDir: true }`.
+Express serves static files from `./public`. Without this, Vite outputs to `client/dist`
+and Express throws `ENOENT: no such file or directory, stat '.../public/index.html'`.
+
+### AdCard Thumbnail Display
+`.ad-card__thumb` uses `aspect-ratio: 9 / 19.5` to match the 390×844 Puppeteer output.
+`object-fit: cover` fills the container cleanly since both are the same ratio.
+
+### AppModal Shared Component
+AppModal was extracted from Apps.jsx into `components/AppModal.jsx` so it can be used
+by both Apps.jsx (edit apps) and UploadPreviewModal.jsx (create app inline during upload).
+Imports styles from `'../pages/Apps.css'` (note the relative path from components/).
+
+### Sidebar Layout Pattern
+All pages use `AppLayout` + consistent CSS class names:
+- `.sb-brand` — top brand name
+- `.sb-nav` — nav button area
+- `.sb-btn` — sidebar button
+- `.sb-divider` — horizontal rule
+- `.sb-section-label` — uppercase section label
+- `.viewer__sb-info` — padded content block inside a section
+
+---
+
+## Outstanding Issues
+
+### 1. White Screenshots — Unity WebGL (UNRESOLVED)
+
+**Symptom:** Clicking "Take Screenshot" on Unity WebGL playables returns a white/blank image.
+
+**Root cause analysis:**
+Unity WebGL uses `preserveDrawingBuffer: false` by default.
+This means after the GPU compositor reads the WebGL framebuffer to display the frame,
+the buffer is cleared. `canvas.toDataURL()` called between frames returns blank.
+
+**Fixes attempted:**
+1. `html2canvas` with frozen canvas data — failed (doesn't capture HTML overlays)
+2. Canvas composite fallback — failed (same issue)
+3. Puppeteer with `networkidle2` + 1500ms wait — failed (Unity initializes after network idle)
+4. Puppeteer with `waitForFunction` polling `canvas.toDataURL()` — failed (still blank due to preserveDrawingBuffer)
+5. **`evaluateOnNewDocument` monkey-patch to force `preserveDrawingBuffer: true`** — partial
+   - Monkey-patches `HTMLCanvasElement.prototype.getContext` before any page scripts run
+   - Forces `{ preserveDrawingBuffer: true }` on all webgl/webgl2 contexts
+   - Changed `waitUntil: 'networkidle2'` → `'load'` because Unity's fetch requests
+     keep the network permanently busy, causing networkidle2 timeout on large files
+   - Test script confirmed this works in isolation (saw "PL Island House" 3D screenshot)
+   - **But user still reports white screenshots in the actual app**
+
+**Suspected remaining cause:**
+The server process was NOT restarted after screenshot.js was changed.
+Node.js caches `require()`d modules — the old code runs until the server restarts.
+Or: there are additional Unity playables with different initialization patterns.
+
+**What to try next:**
+- Restart the server (`Ctrl+C` then `node index.js` or `npm start` in `/server`)
+- If still white: add console logging to screenshot.js to see what `waitForFunction` detects
+- Consider: `page.waitForFunction` might not see `window.unityInstance` if Unity sets it
+  as a local variable (not on window) — check the actual Unity HTML template used
+- Nuclear option: after canvas polling resolves, take 3 screenshots 500ms apart and
+  keep the largest (most content = most bytes)
+
+**Current screenshot.js logic (server/utils/screenshot.js):**
+```js
+// 1. Inject monkey-patch BEFORE page scripts run
+await page.evaluateOnNewDocument(() => {
+  const orig = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = function(type, attrs) {
+    if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
+      attrs = Object.assign({}, attrs || {}, { preserveDrawingBuffer: true });
+    }
+    return orig.call(this, type, attrs);
+  };
+});
+
+// 2. Navigate (load, not networkidle2)
+await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+// 3. Poll canvas for non-blank pixels (up to 20s)
+await page.waitForFunction(() => {
+  const canvases = Array.from(document.querySelectorAll('canvas'))
+    .filter(c => c.width > 0 && c.height > 0);
+  return canvases.some(c => {
+    try {
+      const d = c.toDataURL('image/png');
+      return (d.split(',')[1] || '').length > 2000;
+    } catch { return false; }
+  });
+}, { timeout: 20000, polling: 500 });
+
+// 4. Settle 800ms, then screenshot
+await new Promise(r => setTimeout(r, 800));
+const buffer = await page.screenshot({ type: 'png' });
+```
+
+---
+
+### 2. Simulated Device Too Small on Mobile (UNRESOLVED)
+
+**Symptom:** On mobile viewports, the device frame in Viewer is very small — doesn't fill the available space.
+
+**Root cause:**
+`.viewer__stage` is a flex child of `.app-layout__main` which is `display: flex; flex-direction: column`.
+The stage needs `flex: 1; min-height: 0` to grow and fill the column.
+`min-height: 0` is required because flex children default to `min-height: auto`,
+preventing them from shrinking below their content size.
+
+**Fix was applied** (Viewer.css sets `flex: 1; min-height: 0` on `.viewer__stage`)
+but mobile may still show the device too small because:
+- On mobile, the hamburger bar takes 56px at the top (`padding-top: 56px` on `.app-layout__main`)
+- The scale calculation in Viewer.jsx uses `stageDims` from a ResizeObserver
+- If ResizeObserver fires before layout settles, `stageDims` could be stale
+- The scale formula: `Math.min(1, (sw - 32) / fw, (sh - 32) / fh)` where fw/fh are frame dimensions
+
+**What to try next:**
+- Verify `.viewer__stage` actually has `flex: 1; min-height: 0` in the built CSS
+  (run `npm run build` in `/client` and check `/public/assets/index-*.css`)
+- On mobile, check if `stageDims.height` reflects the full available height minus hamburger
+- The `DeviceFrame` component's `getFrameSize(frame, rotated)` returns fixed pixel dimensions —
+  if the stage is e.g. 400px tall on mobile but the frame is 844px, scale = 400/844 ≈ 0.47
+  which might feel too small. Consider increasing margin or adjusting min-scale.
+
+---
+
+## Playable Fields (DB Schema)
+
+Each ad record:
+```json
+{
+  "id": "uuid",
+  "filename": "uuid.html",
+  "title": "string",
+  "appId": "uuid (ref to apps)",
+  "tags": ["string"],
+  "developer": "string",
+  "repo": "string",
+  "branch": "string",
+  "notes": "string",
+  "thumbnail": "uuid-thumb.png",
+  "uploaded_at": 1234567890,
+  "updated_at": 1234567890
+}
+```
+
+Each app record:
+```json
+{
+  "id": "uuid",
+  "name": "string",
+  "ios_url": "string",
+  "android_url": "string",
+  "icon_url": "string"
+}
+```
+
+---
+
+## Dev Commands
+
+```bash
+# Server (from /server)
+node index.js
+# or if package.json has start script:
+npm start
+
+# Client dev server (from /client)
+npm run dev
+
+# Client production build (from /client)
+npm run build
+# Output goes to /public (Express static root)
+```
--- a/60
+++ b/60
@@ -0,0 +1,60 @@
+# Stage 1: build React client
+FROM node:20-alpine AS client-build
+WORKDIR /app/client
+COPY client/package*.json ./
+RUN npm ci
+COPY client/ ./
+RUN npm run build
+
+# Stage 2: run Express server (Debian-slim for Puppeteer/Chromium compatibility)
+FROM node:20-slim
+WORKDIR /app
+
+# Chromium dependencies for Puppeteer
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    fonts-liberation \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libc6 \
+    libcairo2 \
+    libcups2 \
+    libdbus-1-3 \
+    libexpat1 \
+    libfontconfig1 \
+    libgbm1 \
+    libgcc1 \
+    libglib2.0-0 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libpango-1.0-0 \
+    libpangocairo-1.0-0 \
+    libstdc++6 \
+    libx11-6 \
+    libx11-xcb1 \
+    libxcb1 \
+    libxcomposite1 \
+    libxcursor1 \
+    libxdamage1 \
+    libxext6 \
+    libxfixes3 \
+    libxi6 \
+    libxrandr2 \
+    libxrender1 \
+    libxss1 \
+    libxtst6 \
+    lsb-release \
+    wget \
+    xdg-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY server/package*.json ./
+RUN npm ci --omit=dev
+COPY server/ ./server/
+COPY --from=client-build /app/client/dist ./public
+RUN mkdir -p /data /uploads
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD ["node", "server/index.js"]
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/client/README.md
+++ b/client/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
--- a/client/index.html
+++ b/client/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
--- a/client/public/icons.svg
+++ b/client/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -0,0 +1,23 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { isAuthenticated } from './api';
+import Login from './pages/Login';
+import Apps from './pages/Apps';
+import Catalog from './pages/Catalog';
+import Viewer from './pages/Viewer';
+
+function ProtectedRoute({ children }) {
+  return isAuthenticated() ? children : <Navigate to="/login" replace />;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<ProtectedRoute><Catalog /></ProtectedRoute>} />
+        <Route path="/apps" element={<ProtectedRoute><Apps /></ProtectedRoute>} />
+        <Route path="/viewer/:id" element={<ProtectedRoute><Viewer /></ProtectedRoute>} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -0,0 +1,145 @@
+const ADS_BASE = '/api/ads';
+const APPS_BASE = '/api/apps';
+
+function authHeaders(extra = {}) {
+  const token = localStorage.getItem('showcase_token');
+  return token ? { Authorization: `Bearer ${token}`, ...extra } : { ...extra };
+}
+
+async function apiFetch(url, options = {}) {
+  const res = await fetch(url, {
+    ...options,
+    headers: { ...authHeaders(), ...options.headers },
+  });
+  if (res.status === 401) {
+    localStorage.removeItem('showcase_token');
+    window.location.href = '/login';
+    throw new Error('Unauthorized');
+  }
+  return res;
+}
+
+// ── auth ─────────────────────────────────────────────────────────────────────
+
+export async function login(password) {
+  const res = await fetch('/api/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) throw new Error('Invalid password');
+  const { token } = await res.json();
+  localStorage.setItem('showcase_token', token);
+}
+
+export function logout() {
+  localStorage.removeItem('showcase_token');
+}
+
+export function isAuthenticated() {
+  return !!localStorage.getItem('showcase_token');
+}
+
+// ── ads ──────────────────────────────────────────────────────────────────────
+
+export async function listAds(appId) {
+  const url = appId ? `${ADS_BASE}?appId=${encodeURIComponent(appId)}` : ADS_BASE;
+  const res = await apiFetch(url);
+  if (!res.ok) throw new Error('Failed to fetch ads');
+  return res.json();
+}
+
+export async function getAd(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`);
+  if (!res.ok) throw new Error('Ad not found');
+  return res.json();
+}
+
+export async function uploadAd(file) {
+  const form = new FormData();
+  form.append('file', file);
+  const res = await apiFetch(ADS_BASE, { method: 'POST', body: form });
+  if (!res.ok) throw new Error('Upload failed');
+  return res.json();
+}
+
+export async function updateAd(id, data) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update failed');
+  return res.json();
+}
+
+export async function updateAdFile(id, file) {
+  const form = new FormData();
+  form.append('file', file);
+  const res = await apiFetch(`${ADS_BASE}/${id}/file`, { method: 'POST', body: form });
+  if (!res.ok) throw new Error('File update failed');
+  return res.json();
+}
+
+export async function deleteAd(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error('Delete failed');
+}
+
+export async function requestScreenshot(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}/screenshot`, { method: 'POST' });
+  if (!res.ok) throw new Error('Screenshot failed');
+  return res.json();
+}
+
+export async function saveThumbnail(id, dataUrl) {
+  const res = await apiFetch(`${ADS_BASE}/${id}/thumbnail`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ dataUrl }),
+  });
+  if (!res.ok) throw new Error('Thumbnail save failed');
+  return res.json();
+}
+
+// ── apps ─────────────────────────────────────────────────────────────────────
+
+export async function lookupApp(url) {
+  const res = await apiFetch(`${APPS_BASE}/lookup?url=${encodeURIComponent(url)}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || 'Lookup failed');
+  }
+  return res.json();
+}
+
+export async function listApps() {
+  const res = await apiFetch(APPS_BASE);
+  if (!res.ok) throw new Error('Failed to fetch apps');
+  return res.json();
+}
+
+export async function createApp(data) {
+  const res = await apiFetch(APPS_BASE, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Create app failed');
+  return res.json();
+}
+
+export async function updateApp(id, data) {
+  const res = await apiFetch(`${APPS_BASE}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update app failed');
+  return res.json();
+}
+
+export async function deleteApp(id) {
+  const res = await apiFetch(`${APPS_BASE}/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error('Delete app failed');
+}
--- a/client/src/assets/hero.png
+++ b/client/src/assets/hero.png
--- a/client/src/assets/react.svg
+++ b/client/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/client/src/assets/vite.svg
+++ b/client/src/assets/vite.svg
--- a/client/src/components/AdCard.css
+++ b/client/src/components/AdCard.css
@@ -0,0 +1,153 @@
+.ad-card {
+  background: #1e1e1e;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #2e2e2e;
+  transition: border-color 0.2s, transform 0.15s;
+}
+
+.ad-card:hover {
+  border-color: #7c6af7;
+  transform: translateY(-2px);
+}
+
+.ad-card__thumb {
+  aspect-ratio: 9 / 19.5;
+  background: #111;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+}
+
+.ad-card__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ad-card__thumb-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  text-align: center;
+}
+
+.ad-card__thumb-name {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #aaa;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ad-card__thumb-hint {
+  font-size: 0.7rem;
+  color: #555;
+}
+
+.ad-card__body {
+  padding: 10px 12px 6px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ad-card__top-row {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.ad-card__app-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ad-card__top-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.ad-card__title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #e8e8e8;
+}
+
+.ad-card__app {
+  font-size: 0.75rem;
+  color: #9d8ef7;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ad-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.ad-card__meta {
+  font-size: 0.7rem;
+  color: #555;
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ad-card__actions {
+  display: flex;
+  border-top: 1px solid #2e2e2e;
+}
+
+.ad-card__actions button {
+  flex: 1;
+  background: none;
+  border: none;
+  border-right: 1px solid #2e2e2e;
+  color: #aaa;
+  padding: 8px 0;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ad-card__actions button:last-child {
+  border-right: none;
+}
+
+.ad-card__actions button:hover {
+  background: #2a2a2a;
+  color: #fff;
+}
+
+.ad-card__actions .ad-card__delete:hover {
+  background: #3a1a1a;
+  color: #f77;
+}
--- a/client/src/components/AdCard.jsx
+++ b/client/src/components/AdCard.jsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './AdCard.css';
+
+export default function AdCard({ ad, app, onEdit, onDelete }) {
+  const navigate = useNavigate();
+  const [thumbError, setThumbError] = useState(false);
+  const [iconError, setIconError] = useState(false);
+  const showThumb = ad.thumbnail && !thumbError;
+  const showIcon = app?.icon_url && !iconError;
+
+  return (
+    <div className="ad-card">
+      <div className="ad-card__thumb" onClick={() => navigate(`/viewer/${ad.id}`)}>
+        {showThumb ? (
+          <img
+            src={`/uploads/${ad.thumbnail}`}
+            alt={ad.title}
+            className="ad-card__thumb-img"
+            onError={() => setThumbError(true)}
+          />
+        ) : (
+          <div className="ad-card__thumb-placeholder">
+            <span className="ad-card__thumb-name">{ad.title}</span>
+            <span className="ad-card__thumb-hint">Open to screenshot</span>
+          </div>
+        )}
+      </div>
+      <div className="ad-card__body">
+        <div className="ad-card__top-row">
+          {showIcon && (
+            <img
+              src={app.icon_url}
+              className="ad-card__app-icon"
+              alt=""
+              onError={() => setIconError(true)}
+            />
+          )}
+          <div className="ad-card__top-text">
+            <h3 className="ad-card__title" title={ad.title}>{ad.title}</h3>
+            {app && <span className="ad-card__app">{app.name}</span>}
+          </div>
+        </div>
+      </div>
+      <div className="ad-card__actions">
+        <button onClick={() => navigate(`/viewer/${ad.id}`)} title="Open viewer">▶</button>
+        <button onClick={() => onEdit(ad)} title="Edit metadata">✎</button>
+        <button onClick={() => onDelete(ad)} title="Delete" className="ad-card__delete">✕</button>
+      </div>
+    </div>
+  );
+}
--- a/client/src/components/AppLayout.css
+++ b/client/src/components/AppLayout.css
@@ -0,0 +1,178 @@
+.app-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: #0e0e0e;
+}
+
+.app-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: #141414;
+  border-right: 1px solid #222;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.app-layout__main {
+  flex: 1;
+  overflow: auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hamburger — hidden on desktop */
+.app-layout__hamburger {
+  display: none;
+}
+
+/* Overlay — only used on mobile */
+.app-layout__overlay {
+  display: none;
+}
+
+/* ── Shared sidebar building blocks ─────────────────────────────────────── */
+
+.sb-brand {
+  padding: 20px 16px 14px;
+  font-size: 0.88rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  background: linear-gradient(135deg, #7c6af7, #b89bf7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  flex-shrink: 0;
+}
+
+.sb-divider {
+  height: 1px;
+  background: #222;
+  margin: 4px 0;
+  flex-shrink: 0;
+}
+
+.sb-section-label {
+  padding: 10px 14px 4px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #444;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  flex-shrink: 0;
+}
+
+.sb-nav {
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sb-btn {
+  background: none;
+  border: none;
+  border-radius: 8px;
+  color: #888;
+  padding: 8px 10px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-btn:hover {
+  background: #1e1e1e;
+  color: #e8e8e8;
+}
+
+.sb-btn--active {
+  background: #2a2440;
+  color: #9d8ef7;
+}
+
+.sb-btn--primary {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  font-weight: 600;
+}
+
+.sb-btn--primary:hover {
+  background: #352d55;
+  color: #b8aaf9;
+}
+
+.sb-app-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.sb-app-icon-placeholder {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: #2a2a2a;
+  flex-shrink: 0;
+}
+
+/* ── Mobile ──────────────────────────────────────────────────────────────── */
+
+@media (max-width: 680px) {
+  .app-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+
+  .app-sidebar.is-open {
+    transform: translateX(0);
+    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.7);
+  }
+
+  .app-layout__overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(2px);
+    z-index: 199;
+  }
+
+  .app-layout__hamburger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 198;
+    width: 36px;
+    height: 36px;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #888;
+    font-size: 1.1rem;
+    line-height: 1;
+  }
+
+  .app-layout__main {
+    padding-top: 56px;
+  }
+}
--- a/client/src/components/AppLayout.jsx
+++ b/client/src/components/AppLayout.jsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import './AppLayout.css';
+
+export default function AppLayout({ sidebar, children }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="app-layout">
+      <aside className={`app-sidebar${open ? ' is-open' : ''}`}>
+        {sidebar}
+      </aside>
+
+      {open && (
+        <div className="app-layout__overlay" onClick={() => setOpen(false)} />
+      )}
+
+      <button
+        className="app-layout__hamburger"
+        onClick={() => setOpen(o => !o)}
+        aria-label="Toggle menu"
+      >
+        ☰
+      </button>
+
+      <div className="app-layout__main">{children}</div>
+    </div>
+  );
+}
--- a/client/src/components/AppModal.jsx
+++ b/client/src/components/AppModal.jsx
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+import { lookupApp } from '../api';
+import '../pages/Apps.css';
+
+export default function AppModal({ app, onSave, onClose }) {
+  const dialogRef = useRef();
+  const [name, setName] = useState(app?.name || '');
+  const [iosUrl, setIosUrl] = useState(app?.ios_url || '');
+  const [androidUrl, setAndroidUrl] = useState(app?.android_url || '');
+  const [iconUrl, setIconUrl] = useState(app?.icon_url || '');
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  async function handleUrlBlur(url) {
+    const trimmed = url.trim();
+    if (!trimmed || (!trimmed.includes('apps.apple.com') && !trimmed.includes('play.google.com'))) return;
+    setFetching(true);
+    setFetchError('');
+    try {
+      const data = await lookupApp(trimmed);
+      if (!name) setName(data.name);
+      if (data.icon_url) setIconUrl(data.icon_url);
+    } catch (err) {
+      setFetchError(err.message);
+    } finally {
+      setFetching(false);
+    }
+  }
+
+  async function handleSave() {
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      await onSave({ name: name.trim(), ios_url: iosUrl.trim(), android_url: androidUrl.trim(), icon_url: iconUrl });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="app-modal" onClose={onClose}>
+      <h2>{app ? 'Edit Application' : 'New Application'}</h2>
+
+      <label>
+        iOS App Store URL
+        <input
+          value={iosUrl}
+          onChange={e => setIosUrl(e.target.value)}
+          onBlur={e => handleUrlBlur(e.target.value)}
+          placeholder="https://apps.apple.com/app/..."
+        />
+      </label>
+
+      <label>
+        Android Play Store URL
+        <input
+          value={androidUrl}
+          onChange={e => setAndroidUrl(e.target.value)}
+          onBlur={e => handleUrlBlur(e.target.value)}
+          placeholder="https://play.google.com/store/apps/..."
+        />
+      </label>
+
+      <div className="app-modal__name-row">
+        {iconUrl && (
+          <img src={iconUrl} alt="" className="app-modal__icon-preview" onError={() => setIconUrl('')} />
+        )}
+        <label style={{ flex: 1 }}>
+          Name
+          <div className="app-modal__name-input-wrap">
+            <input
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={fetching ? 'Fetching…' : 'App name'}
+              autoFocus={!iosUrl && !androidUrl}
+            />
+            {fetching && <span className="app-modal__spinner" />}
+          </div>
+        </label>
+      </div>
+
+      {fetchError && <p className="app-modal__fetch-error">Could not auto-fill: {fetchError}</p>}
+
+      <div className="app-modal__footer">
+        <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={saving || !name.trim() || fetching}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </dialog>
+  );
+}
--- a/client/src/components/DeviceFrame.css
+++ b/client/src/components/DeviceFrame.css
@@ -0,0 +1,46 @@
+.device-frame {
+  position: relative;
+  background: #1a1a1a;
+  box-shadow:
+    0 0 0 2px #444,
+    0 0 0 6px #222,
+    0 20px 60px rgba(0,0,0,0.6);
+  flex-shrink: 0;
+}
+
+.device-frame--phone {
+  border-radius: 40px;
+}
+
+.device-frame--tablet {
+  border-radius: 28px;
+}
+
+.device-frame__notch {
+  position: absolute;
+  background: #111;
+  border-radius: 12px;
+  z-index: 1;
+}
+
+.device-frame--tablet .device-frame__notch {
+  border-radius: 50%;
+}
+
+.device-frame__screen {
+  position: absolute;
+  overflow: hidden;
+  background: #000;
+  border-radius: 4px;
+}
+
+.device-frame__screen iframe {
+  border: none;
+  display: block;
+}
+
+.device-frame__home {
+  position: absolute;
+  background: #444;
+  border-radius: 3px;
+}
--- a/client/src/components/DeviceFrame.jsx
+++ b/client/src/components/DeviceFrame.jsx
@@ -0,0 +1,83 @@
+import './DeviceFrame.css';
+
+// Screen resolution (inner display area)
+// Phone: 390×844 → 9:19.5 (iPhone 14)
+// Tablet: 744×1133 → iPad mini 6th gen (≈ 2:3)
+const SCREEN = {
+  phone:  { portrait: { w: 390, h: 844 }, landscape: { w: 844, h: 390 } },
+  tablet: { portrait: { w: 744, h: 1133 }, landscape: { w: 1133, h: 744 } },
+};
+
+// Bezel padding [top, right, bottom, left] sized so outer frame matches target ratio:
+//   Phone outer:  410×888  → 9:19.5  ✓
+//   Tablet outer: 768×1152 → 2:3     ✓
+const BEZEL = {
+  phone:  { portrait: [28, 10, 16, 10], landscape: [10, 28, 10, 16] },
+  tablet: { portrait: [13, 12,  6, 12], landscape: [ 6, 13, 12, 12] },
+};
+
+export const FRAMES = {
+  phone:  { label: 'Phone' },
+  tablet: { label: 'Tablet' },
+};
+
+export function getFrameSize(frame, rotated) {
+  const o = rotated ? 'landscape' : 'portrait';
+  const { w, h } = SCREEN[frame][o];
+  const [pt, pr, pb, pl] = BEZEL[frame][o];
+  return { width: w + pl + pr, height: h + pt + pb };
+}
+
+export default function DeviceFrame({ frame = 'phone', filename, rotated = false, iframeRef, onIframeLoad }) {
+  const o = rotated ? 'landscape' : 'portrait';
+  const { w: sw, h: sh } = SCREEN[frame][o];
+  const [pt, pr, pb, pl] = BEZEL[frame][o];
+  const outerW = sw + pl + pr;
+  const outerH = sh + pt + pb;
+  const isPhone = frame === 'phone';
+
+  // Notch
+  const notchW = isPhone ? 90 : 14;
+  const notchH = isPhone ? 24 : 14;
+  const notchStyle = rotated
+    ? { width: notchH, height: notchW, top: (outerH - notchW) / 2, left: (pl - notchH) / 2 }
+    : { width: notchW, height: notchH, top: (pt - notchH) / 2, left: (outerW - notchW) / 2 };
+
+  // Home bar (phone only)
+  const homeStyle = isPhone
+    ? rotated
+      ? { width: 6, height: 40, top: (outerH - 40) / 2, right: (pr - 6) / 2 }
+      : { width: 40, height: 6, bottom: (pb - 6) / 2, left: (outerW - 40) / 2 }
+    : null;
+
+  return (
+    <div
+      className={`device-frame device-frame--${frame}`}
+      style={{ width: outerW, height: outerH }}
+    >
+      {/* Notch / camera dot */}
+      <div className="device-frame__notch" style={notchStyle} />
+
+      {/* Screen — exactly the device resolution.
+          Corner radius = outer bezel radius − side bezel width, so the
+          screen edge follows the body curve instead of looking pasted on. */}
+      <div className="device-frame__screen" style={{
+        top: pt, left: pl, width: sw, height: sh,
+        borderRadius: isPhone ? 30 : 16,
+      }}>
+        <iframe
+          ref={iframeRef}
+          key={`${filename}-${frame}-${o}`}
+          src={`/uploads/${filename}`}
+          title="Playable ad"
+          sandbox="allow-scripts allow-same-origin allow-forms"
+          onLoad={onIframeLoad}
+          style={{ width: sw, height: sh }}
+        />
+      </div>
+
+      {/* Home indicator */}
+      {homeStyle && <div className="device-frame__home" style={homeStyle} />}
+    </div>
+  );
+}
--- a/client/src/components/DropZone.css
+++ b/client/src/components/DropZone.css
@@ -0,0 +1,31 @@
+.dropzone {
+  border: 2px dashed #555;
+  border-radius: 12px;
+  padding: 40px 24px;
+  text-align: center;
+  cursor: pointer;
+  color: #aaa;
+  transition: border-color 0.2s, background 0.2s;
+  background: #1a1a1a;
+  user-select: none;
+}
+
+.dropzone:hover,
+.dropzone--active {
+  border-color: #7c6af7;
+  background: #1e1b2e;
+  color: #ccc;
+}
+
+.dropzone__icon {
+  display: block;
+  font-size: 2.5rem;
+  line-height: 1;
+  margin-bottom: 8px;
+  color: #7c6af7;
+}
+
+.dropzone p {
+  margin: 0;
+  font-size: 0.95rem;
+}
--- a/client/src/components/DropZone.jsx
+++ b/client/src/components/DropZone.jsx
@@ -0,0 +1,41 @@
+import { useRef, useState } from 'react';
+import './DropZone.css';
+
+export default function DropZone({ onFiles }) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef();
+
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    const files = [...e.dataTransfer.files].filter(f => f.name.endsWith('.html'));
+    if (files.length) onFiles(files);
+  }
+
+  function handleChange(e) {
+    const files = [...e.target.files];
+    if (files.length) onFiles(files);
+    e.target.value = '';
+  }
+
+  return (
+    <div
+      className={`dropzone${dragging ? ' dropzone--active' : ''}`}
+      onDragOver={e => { e.preventDefault(); setDragging(true); }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current.click()}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".html"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
+      <span className="dropzone__icon">+</span>
+      <p>Drop <strong>.html</strong> files here or click to browse</p>
+    </div>
+  );
+}
--- a/client/src/components/MetadataModal.css
+++ b/client/src/components/MetadataModal.css
@@ -0,0 +1,244 @@
+.meta-modal {
+  background: #1e1e1e;
+  color: #e8e8e8;
+  border: 1px solid #333;
+  border-radius: 16px;
+  padding: 28px 32px;
+  width: 480px;
+  max-width: 94vw;
+  max-height: 90dvh;
+  overflow-y: auto;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
+}
+
+.meta-modal::backdrop {
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(3px);
+}
+
+.meta-modal h2 {
+  margin: 0 0 20px;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.meta-modal label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+
+.meta-modal__required {
+  color: #f77;
+  text-transform: none;
+}
+
+.meta-modal input,
+.meta-modal textarea,
+.meta-modal__select {
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.meta-modal input:focus,
+.meta-modal textarea:focus,
+.meta-modal__select:focus {
+  border-color: #7c6af7;
+}
+
+.meta-modal textarea {
+  resize: vertical;
+}
+
+.meta-modal__select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.meta-modal__tag-row {
+  display: flex;
+  gap: 8px;
+}
+
+.meta-modal__tag-row input {
+  flex: 1;
+}
+
+.meta-modal__tag-row button {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 6px 14px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.meta-modal__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 24px;
+  margin-top: 4px;
+}
+
+.meta-modal__tags .tag {
+  background: #2a2440;
+  color: #9d8ef7;
+  font-size: 0.78rem;
+  padding: 3px 8px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-modal__tags .tag button {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.meta-modal__row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+@media (max-width: 480px) {
+  .meta-modal {
+    padding: 20px 18px;
+  }
+
+  .meta-modal__row2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.meta-modal__replace {
+  margin-bottom: 16px;
+}
+
+.meta-modal__replace-label {
+  display: block;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.meta-modal__replace-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.meta-modal__file-input {
+  display: none;
+}
+
+.meta-modal__file-btn {
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.meta-modal__file-name {
+  font-size: 0.88rem;
+  color: #9d8ef7;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta-modal__file-clear {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.meta-modal__file-hint {
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.meta-modal__error {
+  font-size: 0.85rem;
+  color: #f77;
+  margin: -8px 0 12px;
+}
+
+.meta-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.btn-primary {
+  background: #7c6af7;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6a58e0;
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn-secondary {
+  background: #2a2a2a;
+  color: #ccc;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-secondary:hover {
+  background: #333;
+}
--- a/client/src/components/MetadataModal.jsx
+++ b/client/src/components/MetadataModal.jsx
@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import './MetadataModal.css';
+
+export default function MetadataModal({ ad, apps = [], onSave, onClose }) {
+  const dialogRef = useRef();
+  const fileInputRef = useRef();
+  const [title, setTitle] = useState(ad.title);
+  const [appId, setAppId] = useState(ad.appId || '');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState(ad.tags || []);
+  const [repo, setRepo] = useState(ad.repo || '');
+  const [branch, setBranch] = useState(ad.branch || 'main');
+  const [developer, setDeveloper] = useState(ad.developer || '');
+  const [notes, setNotes] = useState(ad.notes || '');
+  const [newFile, setNewFile] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  function addTag() {
+    const t = tagInput.trim().toLowerCase();
+    if (t && !tags.includes(t)) setTags([...tags, t]);
+    setTagInput('');
+  }
+
+  function removeTag(t) {
+    setTags(tags.filter(x => x !== t));
+  }
+
+  function handleFileChange(e) {
+    setNewFile(e.target.files[0] || null);
+  }
+
+  function clearFile() {
+    setNewFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }
+
+  async function handleSave() {
+    if (!appId) { setError('Application is required.'); return; }
+    setError('');
+    setSaving(true);
+    try {
+      await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes, newFile });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="meta-modal" onClose={onClose}>
+      <h2>Edit Metadata</h2>
+
+      <label>
+        Title
+        <input value={title} onChange={e => setTitle(e.target.value)} />
+      </label>
+
+      <label>
+        Application <span className="meta-modal__required">*</span>
+        <select value={appId} onChange={e => setAppId(e.target.value)} className="meta-modal__select">
+          <option value="">— select application —</option>
+          {apps.map(a => (
+            <option key={a.id} value={a.id}>{a.name}</option>
+          ))}
+        </select>
+      </label>
+
+      <label>
+        Tags
+        <div className="meta-modal__tag-row">
+          <input
+            value={tagInput}
+            onChange={e => setTagInput(e.target.value)}
+            onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
+            placeholder="Add tag, press Enter"
+          />
+          <button type="button" onClick={addTag}>Add</button>
+        </div>
+        <div className="meta-modal__tags">
+          {tags.map(t => (
+            <span key={t} className="tag">
+              {t} <button type="button" onClick={() => removeTag(t)}>×</button>
+            </span>
+          ))}
+        </div>
+      </label>
+
+      <label>
+        Developer
+        <input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
+      </label>
+
+      <div className="meta-modal__row2">
+        <label>
+          Repo
+          <input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
+        </label>
+        <label>
+          Branch
+          <input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
+        </label>
+      </div>
+
+      <label>
+        Notes
+        <textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
+      </label>
+
+      <div className="meta-modal__replace">
+        <span className="meta-modal__replace-label">Replace HTML</span>
+        <div className="meta-modal__replace-row">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".html,text/html"
+            id="replace-file"
+            className="meta-modal__file-input"
+            onChange={handleFileChange}
+          />
+          <label htmlFor="replace-file" className="btn-secondary meta-modal__file-btn">
+            Choose file
+          </label>
+          {newFile ? (
+            <span className="meta-modal__file-name">
+              {newFile.name}
+              <button type="button" onClick={clearFile} className="meta-modal__file-clear">×</button>
+            </span>
+          ) : (
+            <span className="meta-modal__file-hint">No file selected</span>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="meta-modal__error">{error}</p>}
+
+      <div className="meta-modal__footer">
+        <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+        <button type="button" onClick={handleSave} disabled={saving} className="btn-primary">
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </dialog>
+  );
+}
--- a/client/src/components/UploadPreviewModal.css
+++ b/client/src/components/UploadPreviewModal.css
@@ -0,0 +1,236 @@
+.upm {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  border-radius: 20px;
+  padding: 0;
+  width: min(920px, 96vw);
+  max-height: 92vh;
+  overflow: hidden;
+  box-shadow: 0 32px 100px rgba(0,0,0,0.85);
+}
+
+.upm::backdrop {
+  background: rgba(0,0,0,0.75);
+  backdrop-filter: blur(4px);
+}
+
+.upm__layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+/* ── Left: preview ─────────────────────────────────────────────────────── */
+
+.upm__preview {
+  background: #111;
+  border-right: 1px solid #222;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 24px 20px;
+}
+
+.upm__frame {
+  width: 220px;
+  aspect-ratio: 9 / 19.5;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 2px solid #2e2e2e;
+  background: #000;
+  flex-shrink: 0;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+}
+
+.upm__iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.upm__shot-hint {
+  font-size: 0.75rem;
+  color: #555;
+  margin: 0;
+}
+
+/* ── Right: form ───────────────────────────────────────────────────────── */
+
+.upm__form {
+  padding: 28px 28px 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  color: #e8e8e8;
+}
+
+.upm__form h2 {
+  margin: 0 0 20px;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.upm__form label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: #888;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 14px;
+}
+
+.upm__form input,
+.upm__form textarea,
+.upm__select {
+  background: #111;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.92rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.upm__form input:focus,
+.upm__form textarea:focus,
+.upm__select:focus {
+  border-color: #7c6af7;
+}
+
+.upm__form textarea { resize: vertical; }
+
+.upm__select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.upm__app-row {
+  display: flex;
+  gap: 8px;
+}
+
+.upm__app-row .upm__select {
+  flex: 1;
+}
+
+.upm__new-app-btn {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+
+.upm__new-app-btn:hover {
+  background: #352d55;
+}
+
+.upm__req {
+  color: #f77;
+  text-transform: none;
+}
+
+.upm__row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.upm__tag-row {
+  display: flex;
+  gap: 8px;
+}
+
+.upm__tag-row input { flex: 1; }
+
+.upm__tag-add {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.upm__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 20px;
+  margin-top: 4px;
+}
+
+.upm__tags .tag button {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0 0 0 4px;
+  line-height: 1;
+}
+
+.upm__error {
+  font-size: 0.83rem;
+  color: #f77;
+  margin: -6px 0 10px;
+}
+
+.upm__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: auto;
+  padding-top: 16px;
+}
+
+@media (max-width: 680px) {
+  .upm {
+    width: 100vw;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: none;
+    margin: 0;
+  }
+
+  .upm__layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+
+  .upm__preview {
+    padding: 16px;
+    gap: 10px;
+  }
+
+  .upm__frame {
+    width: 140px;
+    aspect-ratio: 9 / 19.5;
+  }
+
+  .upm__shot-hint {
+    display: none;
+  }
+}
--- a/client/src/components/UploadPreviewModal.jsx
+++ b/client/src/components/UploadPreviewModal.jsx
@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react';
+import { createApp, requestScreenshot } from '../api';
+import AppModal from './AppModal';
+import './UploadPreviewModal.css';
+
+export default function UploadPreviewModal({ ad, apps: appsProp = [], onSave, onClose }) {
+  const dialogRef = useRef();
+  const initialScreenshotStarted = useRef(false);
+
+  const [title, setTitle] = useState(ad.title);
+  const [appId, setAppId] = useState(ad.appId || '');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState(ad.tags || []);
+  const [developer, setDeveloper] = useState(ad.developer || '');
+  const [repo, setRepo] = useState(ad.repo || '');
+  const [branch, setBranch] = useState(ad.branch || 'main');
+  const [notes, setNotes] = useState(ad.notes || '');
+
+  const [localApps, setLocalApps] = useState(appsProp);
+  const [creatingApp, setCreatingApp] = useState(false);
+  const [screenshotTaken, setScreenshotTaken] = useState(false);
+  const [screenshotStatus, setScreenshotStatus] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  useEffect(() => {
+    if (initialScreenshotStarted.current) return;
+    initialScreenshotStarted.current = true;
+    handleScreenshot();
+  }, []);
+
+  function addTag() {
+    const t = tagInput.trim().toLowerCase();
+    if (t && !tags.includes(t)) setTags([...tags, t]);
+    setTagInput('');
+  }
+
+  function removeTag(t) { setTags(tags.filter(x => x !== t)); }
+
+  async function handleScreenshot() {
+    setScreenshotStatus('saving');
+    try {
+      await requestScreenshot(ad.id);
+      setScreenshotTaken(true);
+      setScreenshotStatus('done');
+    } catch {
+      setScreenshotStatus('error');
+      setTimeout(() => setScreenshotStatus(null), 2500);
+    }
+  }
+
+  async function handleCreateApp(data) {
+    const created = await createApp(data);
+    setLocalApps(prev => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
+    setAppId(created.id);
+    setCreatingApp(false);
+  }
+
+  async function handleSave() {
+    if (!appId) { setError('Application is required.'); return; }
+    setError('');
+    setSaving(true);
+    try {
+      await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="upm" onClose={onClose}>
+      <div className="upm__layout">
+
+        {/* ── Left: live preview ── */}
+        <div className="upm__preview">
+          <div className="upm__frame">
+            <iframe
+
+              src={`/uploads/${ad.filename}`}
+              title="Playable preview"
+              sandbox="allow-scripts allow-same-origin allow-forms"
+              className="upm__iframe"
+            />
+          </div>
+          {!screenshotTaken && (
+            <p className="upm__shot-hint">
+              {screenshotStatus === 'saving' ? 'Capturing initial thumbnail…' : 'Required before saving'}
+            </p>
+          )}
+        </div>
+
+        {/* ── Right: metadata form ── */}
+        <div className="upm__form">
+          <h2>New Playable</h2>
+
+          <label>
+            Title
+            <input value={title} onChange={e => setTitle(e.target.value)} />
+          </label>
+
+          <label>
+            Application <span className="upm__req">*</span>
+            <div className="upm__app-row">
+              <select value={appId} onChange={e => setAppId(e.target.value)} className="upm__select">
+                <option value="">— select application —</option>
+                {localApps.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+              </select>
+              <button type="button" className="upm__new-app-btn" onClick={() => setCreatingApp(true)}>+ New</button>
+            </div>
+          </label>
+
+          <label>
+            Tags
+            <div className="upm__tag-row">
+              <input
+                value={tagInput}
+                onChange={e => setTagInput(e.target.value)}
+                onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
+                placeholder="Add tag, press Enter"
+              />
+              <button type="button" onClick={addTag} className="upm__tag-add">Add</button>
+            </div>
+            <div className="upm__tags">
+              {tags.map(t => (
+                <span key={t} className="tag">
+                  {t} <button type="button" onClick={() => removeTag(t)}>×</button>
+                </span>
+              ))}
+            </div>
+          </label>
+
+          <label>
+            Developer
+            <input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
+          </label>
+
+          <div className="upm__row2">
+            <label>
+              Repo
+              <input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
+            </label>
+            <label>
+              Branch
+              <input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
+            </label>
+          </div>
+
+          <label>
+            Notes
+            <textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
+          </label>
+
+          {error && <p className="upm__error">{error}</p>}
+
+          <div className="upm__footer">
+            <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || !screenshotTaken}
+              className="btn-primary"
+              title={!screenshotTaken ? 'Take a screenshot first' : ''}
+            >
+              {saving ? 'Saving…' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {creatingApp && (
+        <AppModal
+          app={null}
+          onSave={handleCreateApp}
+          onClose={() => setCreatingApp(false)}
+        />
+      )}
+    </dialog>
+  );
+}
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -0,0 +1,65 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #0e0e0e;
+  color: #e8e8e8;
+  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+h1, h2, h3 {
+  margin: 0;
+}
+
+button {
+  font-family: inherit;
+}
+
+a {
+  color: #9d8ef7;
+  text-decoration: none;
+}
+
+.tag {
+  background: #2a2440;
+  color: #9d8ef7;
+  font-size: 0.72rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.btn-primary {
+  background: #7c6af7;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) { background: #6a58e0; }
+.btn-primary:disabled { opacity: 0.6; cursor: default; }
+
+.btn-secondary {
+  background: #2a2a2a;
+  color: #ccc;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-secondary:hover { background: #333; }
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/client/src/pages/Apps.css
+++ b/client/src/pages/Apps.css
@@ -0,0 +1,251 @@
+.apps-page {
+  max-width: 800px;
+  padding: 28px 24px;
+}
+
+.apps-page__title {
+  font-size: 1.4rem;
+  font-weight: 800;
+  margin: 0 0 24px;
+  background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 480px) {
+  .apps-page {
+    padding: 16px 12px;
+  }
+}
+
+.apps-page__empty {
+  text-align: center;
+  color: #555;
+  margin-top: 48px;
+  font-size: 0.95rem;
+}
+
+.apps-page__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.app-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: #1e1e1e;
+  border: 1px solid #2e2e2e;
+  border-radius: 12px;
+  padding: 14px 20px;
+  transition: border-color 0.2s;
+}
+
+.app-row__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.app-row__icon-placeholder {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: #2a2a2a;
+  flex-shrink: 0;
+}
+
+.app-row:hover {
+  border-color: #3e3e3e;
+}
+
+.app-row__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-row__name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.app-row__links {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.app-row__store {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.app-row__store--ios {
+  background: #1a2535;
+  color: #60a5fa;
+  border: 1px solid #2a4060;
+}
+
+.app-row__store--ios:hover {
+  background: #1e2e45;
+}
+
+.app-row__store--android {
+  background: #1a2a1a;
+  color: #6fcf6f;
+  border: 1px solid #2a4a2a;
+}
+
+.app-row__store--android:hover {
+  background: #1e341e;
+}
+
+.app-row__store--missing {
+  color: #444;
+  border: 1px solid #2e2e2e;
+  background: #161616;
+}
+
+.app-row__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.app-row__actions button {
+  background: #2a2a2a;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  color: #aaa;
+  padding: 6px 12px;
+  font-size: 0.83rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.app-row__actions button:hover {
+  background: #333;
+  color: #fff;
+}
+
+.app-row__delete:hover {
+  background: #3a1a1a !important;
+  color: #f77 !important;
+  border-color: #5e2e2e !important;
+}
+
+/* App Modal ─────────────────────────────────────────────────────────────── */
+.app-modal {
+  background: #1e1e1e;
+  color: #e8e8e8;
+  border: 1px solid #333;
+  border-radius: 16px;
+  padding: 28px 32px;
+  width: 460px;
+  max-width: 90vw;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
+}
+
+.app-modal::backdrop {
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(3px);
+}
+
+.app-modal h2 {
+  margin: 0 0 20px;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.app-modal label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+
+.app-modal input {
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.app-modal input:focus {
+  border-color: #7c6af7;
+}
+
+.app-modal__name-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.app-modal__icon-preview {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid #333;
+}
+
+.app-modal__name-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.app-modal__name-input-wrap input {
+  width: 100%;
+}
+
+.app-modal__spinner {
+  position: absolute;
+  right: 10px;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #333;
+  border-top-color: #7c6af7;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.app-modal__fetch-error {
+  font-size: 0.8rem;
+  color: #f97;
+  margin: -8px 0 14px;
+}
+
+.app-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
--- a/client/src/pages/Apps.jsx
+++ b/client/src/pages/Apps.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AppLayout from '../components/AppLayout';
+import AppModal from '../components/AppModal';
+import { createApp, deleteApp, listApps, updateApp } from '../api';
+import './Apps.css';
+
+export default function Apps() {
+  const navigate = useNavigate();
+  const [apps, setApps] = useState([]);
+  const [editingApp, setEditingApp] = useState(null);
+
+  useEffect(() => { load(); }, []);
+
+  function sortByName(list) {
+    return [...list].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  async function load() {
+    setApps(sortByName(await listApps()));
+  }
+
+  async function handleSave(data) {
+    if (editingApp === 'new') {
+      const created = await createApp(data);
+      setApps(prev => sortByName([created, ...prev]));
+    } else {
+      const updated = await updateApp(editingApp.id, data);
+      setApps(prev => sortByName(prev.map(a => a.id === updated.id ? updated : a)));
+    }
+    setEditingApp(null);
+  }
+
+  async function handleDelete(app) {
+    if (!confirm(`Delete "${app.name}"? Playables linked to it will become unlinked.`)) return;
+    await deleteApp(app.id);
+    setApps(prev => prev.filter(a => a.id !== app.id));
+  }
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+      <div className="sb-nav">
+        <button className="sb-btn sb-btn--primary" onClick={() => setEditingApp('new')}>+ New Application</button>
+        <button className="sb-btn" onClick={() => navigate('/')}>← Catalog</button>
+      </div>
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="apps-page">
+        <h1 className="apps-page__title">Applications</h1>
+
+        {apps.length === 0 && (
+          <p className="apps-page__empty">No applications yet. Create one to start organizing playables.</p>
+        )}
+
+        <div className="apps-page__list">
+          {apps.map(app => (
+            <div key={app.id} className="app-row">
+              {app.icon_url
+                ? <img src={app.icon_url} alt={app.name} className="app-row__icon" onError={e => { e.target.style.display = 'none'; }} />
+                : <div className="app-row__icon-placeholder" />
+              }
+              <div className="app-row__info">
+                <span className="app-row__name">{app.name}</span>
+                <div className="app-row__links">
+                  {app.ios_url
+                    ? <a href={app.ios_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--ios">iOS</a>
+                    : <span className="app-row__store app-row__store--missing">No iOS link</span>
+                  }
+                  {app.android_url
+                    ? <a href={app.android_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--android">Android</a>
+                    : <span className="app-row__store app-row__store--missing">No Android link</span>
+                  }
+                </div>
+              </div>
+              <div className="app-row__actions">
+                <button onClick={() => setEditingApp(app)}>✎ Edit</button>
+                <button onClick={() => handleDelete(app)} className="app-row__delete">✕</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {editingApp && (
+        <AppModal
+          app={editingApp === 'new' ? null : editingApp}
+          onSave={handleSave}
+          onClose={() => setEditingApp(null)}
+        />
+      )}
+    </AppLayout>
+  );
+}
--- a/client/src/pages/Catalog.css
+++ b/client/src/pages/Catalog.css
@@ -0,0 +1,49 @@
+.catalog {
+  padding: 24px 20px;
+}
+
+.catalog__search-wrap {
+  padding: 4px 8px;
+}
+
+.catalog__search {
+  width: 100%;
+  background: #111;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 7px 10px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.catalog__search:focus {
+  border-color: #7c6af7;
+}
+
+.catalog__search::placeholder {
+  color: #555;
+}
+
+.catalog__empty {
+  text-align: center;
+  color: #555;
+  margin-top: 48px;
+  font-size: 0.95rem;
+}
+
+.catalog__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+}
+
+@media (max-width: 480px) {
+  .catalog__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+}
--- a/client/src/pages/Catalog.jsx
+++ b/client/src/pages/Catalog.jsx
@@ -0,0 +1,190 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AdCard from '../components/AdCard';
+import AppLayout from '../components/AppLayout';
+import MetadataModal from '../components/MetadataModal';
+import UploadPreviewModal from '../components/UploadPreviewModal';
+import { deleteAd, listAds, listApps, updateAd, updateAdFile, uploadAd } from '../api';
+import './Catalog.css';
+
+export default function Catalog() {
+  const navigate = useNavigate();
+  const fileInputRef = useRef();
+  const uploadQueueRef = useRef([]);
+
+  const [ads, setAds] = useState([]);
+  const [apps, setApps] = useState([]);
+  const [activeAppId, setActiveAppId] = useState(null);
+  const [search, setSearch] = useState('');
+  const [editingAd, setEditingAd] = useState(null);
+  const [pendingAd, setPendingAd] = useState(null);
+
+  useEffect(() => {
+    listApps()
+      .then(list => setApps([...list].sort((a, b) => a.name.localeCompare(b.name))))
+      .catch(() => {});
+  }, []);
+  useEffect(() => { listAds(activeAppId).then(setAds).catch(() => {}); }, [activeAppId]);
+
+  // ── upload flow ──────────────────────────────────────────────────────────
+
+  function openFilePicker() { fileInputRef.current.click(); }
+
+  async function handleFileSelect(e) {
+    const files = [...e.target.files];
+    e.target.value = '';
+    if (!files.length) return;
+    uploadQueueRef.current = files;
+    processNext();
+  }
+
+  async function processNext() {
+    const file = uploadQueueRef.current.shift();
+    if (!file) return;
+    try {
+      const ad = await uploadAd(file);
+      setPendingAd({ ...ad, _next: processNext });
+    } catch (err) {
+      console.error('Upload failed', err);
+      processNext();
+    }
+  }
+
+  async function handleUploadSave(data) {
+    const updated = await updateAd(pendingAd.id, data);
+    setAds(prev => [updated, ...prev.filter(a => a.id !== updated.id)]);
+    const next = pendingAd._next;
+    setPendingAd(null);
+    if (next) next();
+  }
+
+  async function handleUploadCancel() {
+    deleteAd(pendingAd.id).catch(() => {});
+    uploadQueueRef.current = [];
+    setPendingAd(null);
+  }
+
+  // ── edit existing ────────────────────────────────────────────────────────
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(editingAd.id, newFile);
+    const updated = await updateAd(editingAd.id, data);
+    setAds(prev => prev.map(a => a.id === updated.id ? updated : a));
+    setEditingAd(null);
+  }
+
+  async function handleDelete(ad) {
+    if (!confirm(`Delete "${ad.title}"?`)) return;
+    await deleteAd(ad.id);
+    setAds(prev => prev.filter(a => a.id !== ad.id));
+  }
+
+  const appsById = Object.fromEntries(apps.map(a => [a.id, a]));
+
+  // ── search filter ────────────────────────────────────────────────────────
+
+  const query = search.trim().toLowerCase();
+  const visibleAds = query
+    ? ads.filter(ad => {
+        const appName = appsById[ad.appId]?.name?.toLowerCase() || '';
+        return (
+          ad.title.toLowerCase().includes(query) ||
+          (ad.developer || '').toLowerCase().includes(query) ||
+          appName.includes(query) ||
+          (ad.tags || []).some(t => t.includes(query))
+        );
+      })
+    : ads;
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+
+      <div className="sb-nav">
+        <input ref={fileInputRef} type="file" accept=".html" multiple style={{ display: 'none' }} onChange={handleFileSelect} />
+        <button className="sb-btn sb-btn--primary" onClick={openFilePicker}>+ Upload</button>
+        <button className="sb-btn" onClick={() => navigate('/apps')}>Applications</button>
+      </div>
+
+      <div className="sb-divider" />
+      <div className="catalog__search-wrap">
+        <input
+          className="catalog__search"
+          type="search"
+          placeholder="Search…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      {apps.length > 0 && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Filter by App</span>
+          <div className="sb-nav" style={{ paddingTop: 0 }}>
+            <button
+              className={`sb-btn${activeAppId === null ? ' sb-btn--active' : ''}`}
+              onClick={() => setActiveAppId(null)}
+            >
+              All
+            </button>
+            {apps.map(a => (
+              <button
+                key={a.id}
+                className={`sb-btn${activeAppId === a.id ? ' sb-btn--active' : ''}`}
+                onClick={() => setActiveAppId(a.id)}
+              >
+                {a.icon_url
+                  ? <img src={a.icon_url} className="sb-app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
+                  : <div className="sb-app-icon-placeholder" />
+                }
+                {a.name}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="catalog">
+        {visibleAds.length === 0 && (
+          <p className="catalog__empty">
+            {query ? 'No results.' : 'No playables yet. Click + Upload to add one.'}
+          </p>
+        )}
+        <div className="catalog__grid">
+          {visibleAds.map(ad => (
+            <AdCard
+              key={ad.id}
+              ad={ad}
+              app={appsById[ad.appId]}
+              onEdit={setEditingAd}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      </div>
+
+      {pendingAd && (
+        <UploadPreviewModal
+          ad={pendingAd}
+          apps={apps}
+          onSave={handleUploadSave}
+          onClose={handleUploadCancel}
+        />
+      )}
+
+      {editingAd && (
+        <MetadataModal
+          ad={editingAd}
+          apps={apps}
+          onSave={handleSave}
+          onClose={() => setEditingAd(null)}
+        />
+      )}
+    </AppLayout>
+  );
+}
--- a/client/src/pages/Login.css
+++ b/client/src/pages/Login.css
@@ -0,0 +1,68 @@
+.login-wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0e0e0e;
+}
+
+.login-card {
+  background: #181818;
+  border: 1px solid #2a2a2a;
+  border-radius: 16px;
+  padding: 48px 40px 40px;
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.login-logo img {
+  width: 56px;
+  height: 56px;
+}
+
+.login-card h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  text-align: center;
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.login-form input[type='password'] {
+  width: 100%;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 10px 14px;
+  color: #e8e8e8;
+  font-size: 1rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+
+.login-form input[type='password']:focus {
+  border-color: #7c6af7;
+}
+
+.login-form .btn-primary {
+  width: 100%;
+}
+
+.login-error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #f87171;
+  text-align: center;
+}
--- a/client/src/pages/Login.jsx
+++ b/client/src/pages/Login.jsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { login } from '../api';
+import './Login.css';
+
+export default function Login() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(password);
+      navigate('/', { replace: true });
+    } catch {
+      setError('Incorrect password');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-wrapper">
+      <div className="login-card">
+        <div className="login-logo">
+          <img src="/favicon.svg" alt="Logo" />
+        </div>
+        <h1>Playable Showcase</h1>
+        <form onSubmit={handleSubmit} className="login-form">
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            autoFocus
+            autoComplete="current-password"
+          />
+          {error && <p className="login-error">{error}</p>}
+          <button type="submit" className="btn-primary" disabled={loading || !password}>
+            {loading ? 'Signing in…' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/client/src/pages/Upload.css
+++ b/client/src/pages/Upload.css
@@ -0,0 +1,92 @@
+.upload-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.upload-page__header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.upload-page__header h1 {
+  flex: 1;
+  font-size: 1.8rem;
+  font-weight: 800;
+  margin: 0;
+  background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.upload-page__back {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.upload-page__back:hover {
+  color: #b8aaf9;
+}
+
+.upload-page__zone {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.upload-page__warning {
+  text-align: center;
+  color: #888;
+  font-size: 0.88rem;
+  margin: 0;
+}
+
+.upload-page__link {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.upload-page__status {
+  text-align: center;
+  color: #9d8ef7;
+  font-size: 0.9rem;
+  margin-top: 48px;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.upload-page__done {
+  text-align: center;
+  margin-top: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.upload-page__done-msg {
+  font-size: 1.1rem;
+  color: #6fcf6f;
+  margin: 0;
+}
+
+.upload-page__done-actions {
+  display: flex;
+  gap: 12px;
+}
--- a/client/src/pages/Upload.jsx
+++ b/client/src/pages/Upload.jsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DropZone from '../components/DropZone';
+import MetadataModal from '../components/MetadataModal';
+import { deleteAd, listApps, updateAd, updateAdFile, uploadAd } from '../api';
+import './Upload.css';
+
+export default function Upload() {
+  const navigate = useNavigate();
+  const [apps, setApps] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [editingAd, setEditingAd] = useState(null);
+  const [doneCount, setDoneCount] = useState(0);
+  const uploadQueueRef = useRef([]);
+
+  useEffect(() => {
+    listApps().then(setApps).catch(() => {});
+  }, []);
+
+  async function handleFiles(files) {
+    setUploading(true);
+    setDoneCount(0);
+    uploadQueueRef.current = [...files];
+    processNext();
+  }
+
+  async function processNext() {
+    const file = uploadQueueRef.current.shift();
+    if (!file) { setUploading(false); return; }
+    try {
+      const ad = await uploadAd(file);
+      setEditingAd({ ...ad, _afterSave: processNext });
+    } catch (err) {
+      console.error('Upload failed', err);
+      processNext();
+    }
+  }
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(editingAd.id, newFile);
+    await updateAd(editingAd.id, data);
+    setDoneCount(c => c + 1);
+    const after = editingAd._afterSave;
+    setEditingAd(null);
+    if (after) after();
+  }
+
+  function handleClose() {
+    // The file was already uploaded — delete it since the user cancelled
+    if (editingAd) deleteAd(editingAd.id).catch(() => {});
+    // Discard any remaining queued files
+    uploadQueueRef.current = [];
+    setEditingAd(null);
+    setUploading(false);
+  }
+
+  return (
+    <div className="upload-page">
+      <header className="upload-page__header">
+        <button className="upload-page__back" onClick={() => navigate('/')}>← Catalog</button>
+        <h1>Upload Playables</h1>
+      </header>
+
+      {!uploading && doneCount === 0 && (
+        <div className="upload-page__zone">
+          <DropZone onFiles={handleFiles} />
+          {apps.length === 0 && (
+            <p className="upload-page__warning">
+              No applications configured yet.{' '}
+              <button className="upload-page__link" onClick={() => navigate('/apps')}>
+                Create one first
+              </button>{' '}
+              so you can link playables.
+            </p>
+          )}
+        </div>
+      )}
+
+      {uploading && !editingAd && (
+        <p className="upload-page__status">Uploading…</p>
+      )}
+
+      {!uploading && doneCount > 0 && (
+        <div className="upload-page__done">
+          <p className="upload-page__done-msg">
+            {doneCount} playable{doneCount !== 1 ? 's' : ''} uploaded successfully.
+          </p>
+          <div className="upload-page__done-actions">
+            <button className="btn-secondary" onClick={() => { setDoneCount(0); }}>Upload more</button>
+            <button className="btn-primary" onClick={() => navigate('/')}>View in Catalog</button>
+          </div>
+        </div>
+      )}
+
+      {editingAd && (
+        <MetadataModal
+          ad={editingAd}
+          apps={apps}
+          onSave={handleSave}
+          onClose={handleClose}
+        />
+      )}
+    </div>
+  );
+}
--- a/client/src/pages/Viewer.css
+++ b/client/src/pages/Viewer.css
@@ -0,0 +1,190 @@
+.viewer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  color: #666;
+}
+
+/* Stage fills the main content area (flex: 1 since parent is flex column) */
+.viewer__stage {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.viewer__frame-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center center;
+}
+
+/* ── Sidebar content ──────────────────────────────────────────────────────── */
+
+.viewer__sb-info {
+  padding: 4px 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.viewer__sb-title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  word-break: break-word;
+}
+
+.viewer__sb-developer {
+  font-size: 0.78rem;
+  color: #666;
+}
+
+.viewer__app-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.viewer__app-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.viewer__app-icon--placeholder {
+  background: #2a2a2a;
+}
+
+.viewer__app-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer__store-links {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 2px;
+}
+
+.viewer__store-link {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  text-align: center;
+  transition: opacity 0.15s;
+}
+
+.viewer__store-link:hover { opacity: 0.8; }
+
+.viewer__store-link--ios {
+  background: #1c1c2e;
+  color: #a78bfa;
+  border: 1px solid #3730a3;
+}
+
+.viewer__store-link--android {
+  background: #0f2310;
+  color: #6fcf6f;
+  border: 1px solid #1a4a1a;
+}
+
+.viewer__sb-mono {
+  font-size: 0.78rem;
+  color: #888;
+  font-family: monospace;
+  word-break: break-all;
+}
+
+.viewer__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.viewer__spacer {
+  flex: 1;
+}
+
+/* ── Controls section (bottom of sidebar) ─────────────────────────────────── */
+
+.viewer__controls {
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.viewer__frame-btns {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.viewer__frame-btn {
+  flex: 1;
+  background: #252525;
+  border: 1px solid #333;
+  color: #aaa;
+  border-radius: 6px;
+  padding: 5px 6px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.viewer__frame-btn.active,
+.viewer__frame-btn:hover {
+  background: #2a2440;
+  color: #9d8ef7;
+  border-color: #5a4ea8;
+}
+
+.viewer__ctrl-row {
+  display: flex;
+  gap: 5px;
+}
+
+.viewer__ctrl-btn {
+  flex: 1;
+  background: #252525;
+  border: 1px solid #333;
+  color: #aaa;
+  border-radius: 6px;
+  padding: 6px 4px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.viewer__ctrl-btn:hover,
+.viewer__ctrl-btn.active {
+  background: #2a2440;
+  color: #9d8ef7;
+  border-color: #5a4ea8;
+}
+
+.viewer__edit-btn {
+  width: 100%;
+  padding: 8px;
+  font-size: 0.85rem;
+}
+
+@media (max-width: 680px) {
+  .viewer__stage {
+    min-height: 100dvh;
+  }
+}
--- a/client/src/pages/Viewer.jsx
+++ b/client/src/pages/Viewer.jsx
@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getAd, listApps, updateAd, updateAdFile } from '../api';
+import AppLayout from '../components/AppLayout';
+import DeviceFrame, { FRAMES, getFrameSize } from '../components/DeviceFrame';
+import MetadataModal from '../components/MetadataModal';
+import './Viewer.css';
+
+const VIEWER_LAYOUT = {
+  sidebarWidth: 220,
+  mobileBreakpoint: 680,
+  desktopFrameMargin: 32,
+  mobileFrameMargin: 8,
+  fallbackScale: 0.8,
+  scaleTransitionMs: 180,
+};
+
+export default function Viewer() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [ad, setAd] = useState(null);
+  const [apps, setApps] = useState([]);
+  const [frame, setFrame] = useState('phone');
+  const [rotated, setRotated] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const stageRef = useRef();
+  const [stageDims, setStageDims] = useState(() => ({
+    width: window.innerWidth - VIEWER_LAYOUT.sidebarWidth,
+    height: window.innerHeight,
+  }));
+
+  useEffect(() => {
+    getAd(id).then(setAd).catch(() => navigate('/'));
+    listApps().then(setApps).catch(() => {});
+  }, [id, navigate]);
+
+  useEffect(() => {
+    if (!stageRef.current) return undefined;
+
+    let rafId = null;
+    const measure = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const rect = stageRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        setStageDims({ width: rect.width, height: rect.height });
+      });
+    };
+
+    const ro = new ResizeObserver(measure);
+    ro.observe(stageRef.current);
+    window.addEventListener('resize', measure);
+    window.addEventListener('orientationchange', measure);
+    measure();
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('orientationchange', measure);
+    };
+  }, []);
+
+  const scale = useMemo(() => {
+    const { width: fw, height: fh } = getFrameSize(frame, rotated);
+    const { width: sw, height: sh } = stageDims;
+    if (!sw || !sh) return VIEWER_LAYOUT.fallbackScale;
+
+    const margin = sw <= VIEWER_LAYOUT.mobileBreakpoint
+      ? VIEWER_LAYOUT.mobileFrameMargin
+      : VIEWER_LAYOUT.desktopFrameMargin;
+
+    return Math.min(1, (sw - margin) / fw, (sh - margin) / fh);
+  }, [stageDims, frame, rotated]);
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(id, newFile);
+    const updated = await updateAd(id, data);
+    setAd(updated);
+    setEditing(false);
+  }
+
+  if (!ad) return <div className="viewer__loading">Loading...</div>;
+
+  const app = apps.find(a => a.id === ad.appId);
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+      <div className="sb-nav">
+        <button className="sb-btn" onClick={() => navigate('/')}>Back</button>
+      </div>
+
+      <div className="sb-divider" />
+      <span className="sb-section-label">Playable</span>
+      <div className="viewer__sb-info">
+        <span className="viewer__sb-title">{ad.title}</span>
+        {ad.developer && <span className="viewer__sb-developer">{ad.developer}</span>}
+      </div>
+
+      {app && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Application</span>
+          <div className="viewer__sb-info">
+            <div className="viewer__app-row">
+              {app.icon_url
+                ? <img src={app.icon_url} className="viewer__app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
+                : <div className="viewer__app-icon viewer__app-icon--placeholder" />
+              }
+              <span className="viewer__app-name">{app.name}</span>
+            </div>
+            {(app.ios_url || app.android_url) && (
+              <div className="viewer__store-links">
+                {app.ios_url && (
+                  <a href={app.ios_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--ios">
+                    App Store
+                  </a>
+                )}
+                {app.android_url && (
+                  <a href={app.android_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--android">
+                    Google Play
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {ad.repo && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Repo</span>
+          <div className="viewer__sb-info">
+            <span className="viewer__sb-mono">{ad.repo}@{ad.branch || 'main'}</span>
+          </div>
+        </>
+      )}
+
+      {ad.tags?.length > 0 && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Tags</span>
+          <div className="viewer__sb-info">
+            <div className="viewer__tags">
+              {ad.tags.map(t => <span key={t} className="tag">{t}</span>)}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="viewer__spacer" />
+      <div className="sb-divider" />
+
+      <div className="viewer__controls">
+        <span className="sb-section-label" style={{ padding: '8px 14px 4px' }}>Frame</span>
+        <div className="viewer__frame-btns">
+          {Object.entries(FRAMES).map(([key, { label }]) => (
+            <button
+              key={key}
+              className={`viewer__frame-btn${frame === key ? ' active' : ''}`}
+              onClick={() => { setFrame(key); setRotated(false); }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="viewer__ctrl-row">
+          <button
+            className={`viewer__ctrl-btn${rotated ? ' active' : ''}`}
+            onClick={() => setRotated(r => !r)}
+            title="Rotate"
+          >
+            Rotate
+          </button>
+        </div>
+        <button className="btn-primary viewer__edit-btn" onClick={() => setEditing(true)}>Edit</button>
+      </div>
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="viewer__stage" ref={stageRef}>
+        <div
+          className="viewer__frame-wrapper"
+          style={{
+            transform: `translate(-50%, -50%) scale(${scale})`,
+            transition: `transform ${VIEWER_LAYOUT.scaleTransitionMs}ms ease`,
+          }}
+        >
+          <DeviceFrame
+            frame={frame}
+            filename={ad.filename}
+            rotated={rotated}
+          />
+        </div>
+      </div>
+
+      {editing && (
+        <MetadataModal ad={ad} apps={apps} onSave={handleSave} onClose={() => setEditing(false)} />
+      )}
+    </AppLayout>
+  );
+}
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: '../public',
+    emptyOutDir: true,
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/uploads': 'http://localhost:3000',
+    },
+  },
+})
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,13 @@
+services:
+  showcase:
+    build: .
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./uploads:/uploads
+      - ./data:/data
+    environment:
+      - PORT=3000
+      - UPLOADS_DIR=/uploads
+      - DB_PATH=/data/ads.json
+    restart: unless-stopped
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,358 @@
+{
+  "name": "playable-showcase",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "playable-showcase",
+      "version": "1.0.0",
+      "devDependencies": {
+        "concurrently": "^9.1.2",
+        "kill-port": "^2.0.1"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
+      "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "4.1.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.8.3",
+        "supports-color": "8.1.1",
+        "tree-kill": "1.2.2",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-them-args": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/get-them-args/-/get-them-args-1.3.2.tgz",
+      "integrity": "sha512-LRn8Jlk+DwZE4GTlDbT3Hikd1wSHgLMme/+7ddlqKd7ldwR6LjJgTVWzBnR01wnYGe4KgrXjg287RaI22UHmAw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/kill-port": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/kill-port/-/kill-port-2.0.1.tgz",
+      "integrity": "sha512-e0SVOV5jFo0mx8r7bS29maVWp17qGqLBZ5ricNSajON6//kmb7qqqNnml4twNE8Dtj97UQD+gNFOaipS/q1zzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-them-args": "1.3.2",
+        "shell-exec": "1.0.2"
+      },
+      "bin": {
+        "kill-port": "cli.js"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/shell-exec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/shell-exec/-/shell-exec-1.0.2.tgz",
+      "integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "playable-showcase",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently --names \"server,client\" --prefix-colors \"cyan,magenta\" \"npm run dev --prefix server\" \"npm run dev --prefix client\"",
+    "stop": "kill-port 3000 5173"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.2",
+    "kill-port": "^2.0.1"
+  }
+}
--- a/public/assets/index-BfeSErYu.js
+++ b/public/assets/index-BfeSErYu.js
--- a/public/assets/index-D_Lgibo3.css
+++ b/public/assets/index-D_Lgibo3.css
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client</title>
+    <script type="module" crossorigin src="/assets/index-BfeSErYu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D_Lgibo3.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/server/db.js
+++ b/server/db.js
@@ -0,0 +1,131 @@
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const DB_PATH = process.env.DB_PATH || path.join(__dirname, '..', 'data', 'ads.json');
+const APPS_DB_PATH = process.env.APPS_DB_PATH || path.join(__dirname, '..', 'data', 'apps.json');
+
+// ── ads ──────────────────────────────────────────────────────────────────────
+
+function readDb() {
+  try { return JSON.parse(fs.readFileSync(DB_PATH, 'utf8')); }
+  catch { return []; }
+}
+
+function writeDb(ads) {
+  fs.mkdirSync(path.dirname(DB_PATH), { recursive: true });
+  fs.writeFileSync(DB_PATH, JSON.stringify(ads, null, 2), 'utf8');
+}
+
+function listAds(appId) {
+  const ads = readDb();
+  if (appId) return ads.filter(ad => ad.appId === appId);
+  return ads;
+}
+
+function getAd(id) {
+  return readDb().find(ad => ad.id === id) || null;
+}
+
+function insertAd({ id, filename, title, appId, tags, developer, repo, branch, notes }) {
+  const ads = readDb();
+  const now = Date.now();
+  const ad = { id, filename, title, appId: appId || null, tags: tags || [], developer: developer || '', repo: repo || '', branch: branch || '', notes: notes || '', thumbnail: null, uploaded_at: now, updated_at: now };
+  ads.unshift(ad);
+  writeDb(ads);
+  return ad;
+}
+
+function updateAd(id, { title, appId, tags, developer, repo, branch, notes }) {
+  const ads = readDb();
+  const idx = ads.findIndex(ad => ad.id === id);
+  if (idx === -1) return null;
+  ads[idx] = {
+    ...ads[idx],
+    title,
+    appId: appId ?? ads[idx].appId ?? null,
+    tags: tags ?? ads[idx].tags ?? [],
+    developer: developer ?? ads[idx].developer ?? '',
+    repo: repo ?? ads[idx].repo ?? '',
+    branch: branch ?? ads[idx].branch ?? '',
+    notes: notes ?? ads[idx].notes ?? '',
+    updated_at: Date.now(),
+  };
+  writeDb(ads);
+  return ads[idx];
+}
+
+function updateAdFile(id, filename) {
+  const ads = readDb();
+  const idx = ads.findIndex(ad => ad.id === id);
+  if (idx === -1) return null;
+  ads[idx] = { ...ads[idx], filename, updated_at: Date.now() };
+  writeDb(ads);
+  return ads[idx];
+}
+
+function updateAdThumbnail(id, thumbnail) {
+  const ads = readDb();
+  const idx = ads.findIndex(ad => ad.id === id);
+  if (idx === -1) return null;
+  ads[idx] = { ...ads[idx], thumbnail, updated_at: Date.now() };
+  writeDb(ads);
+  return ads[idx];
+}
+
+function deleteAd(id) {
+  const ads = readDb();
+  const idx = ads.findIndex(ad => ad.id === id);
+  if (idx === -1) return null;
+  const [ad] = ads.splice(idx, 1);
+  writeDb(ads);
+  return ad;
+}
+
+// ── apps ─────────────────────────────────────────────────────────────────────
+
+function readAppsDb() {
+  try { return JSON.parse(fs.readFileSync(APPS_DB_PATH, 'utf8')); }
+  catch { return []; }
+}
+
+function writeAppsDb(apps) {
+  fs.mkdirSync(path.dirname(APPS_DB_PATH), { recursive: true });
+  fs.writeFileSync(APPS_DB_PATH, JSON.stringify(apps, null, 2), 'utf8');
+}
+
+function listApps() {
+  return readAppsDb();
+}
+
+function getApp(id) {
+  return readAppsDb().find(a => a.id === id) || null;
+}
+
+function insertApp({ name, ios_url, android_url, icon_url }) {
+  const apps = readAppsDb();
+  const app = { id: crypto.randomUUID(), name, icon_url: icon_url || '', ios_url: ios_url || '', android_url: android_url || '', created_at: Date.now() };
+  apps.unshift(app);
+  writeAppsDb(apps);
+  return app;
+}
+
+function updateApp(id, { name, ios_url, android_url, icon_url }) {
+  const apps = readAppsDb();
+  const idx = apps.findIndex(a => a.id === id);
+  if (idx === -1) return null;
+  apps[idx] = { ...apps[idx], name, icon_url: icon_url ?? apps[idx].icon_url ?? '', ios_url: ios_url || '', android_url: android_url || '' };
+  writeAppsDb(apps);
+  return apps[idx];
+}
+
+function deleteApp(id) {
+  const apps = readAppsDb();
+  const idx = apps.findIndex(a => a.id === id);
+  if (idx === -1) return null;
+  const [app] = apps.splice(idx, 1);
+  writeAppsDb(apps);
+  return app;
+}
+
+module.exports = { listAds, getAd, insertAd, updateAd, updateAdFile, updateAdThumbnail, deleteAd, listApps, getApp, insertApp, updateApp, deleteApp };
--- a/server/index.js
+++ b/server/index.js
@@ -0,0 +1,49 @@
+require('dotenv').config({ path: require('path').join(__dirname, '..', '.env') });
+
+const express = require('express');
+const path = require('path');
+const crypto = require('crypto');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', 'uploads');
+
+// 10mb limit needed for base64-encoded screenshot payloads
+app.use(express.json({ limit: '10mb' }));
+
+// Auth middleware for protected API routes
+function requireAuth(req, res, next) {
+  const password = process.env.SHOWCASE_PASSWORD;
+  if (!password) return next(); // not configured, skip
+
+  const auth = req.headers['authorization'] || '';
+  const token = auth.startsWith('Bearer ') ? auth.slice(7) : '';
+  const expected = crypto.createHmac('sha256', password).update('showcase-session').digest('hex');
+
+  if (token !== expected) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+  next();
+}
+
+// Auth route (public)
+app.use('/api/auth', require('./routes/auth').router);
+
+// Protected API routes
+app.use('/api/apps', requireAuth, require('./routes/apps'));
+app.use('/api/ads', requireAuth, require('./routes/upload'));
+app.use('/api/ads', requireAuth, require('./routes/ads'));
+
+// Serve uploaded HTML files
+app.use('/uploads', express.static(UPLOADS_DIR));
+
+// Serve React build in production
+const publicDir = path.join(__dirname, '..', 'public');
+app.use(express.static(publicDir));
+app.get('*', (_req, res) => {
+  res.sendFile(path.join(publicDir, 'index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`Playable Showcase running on http://localhost:${PORT}`);
+});
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "playable-showcase-server",
+  "version": "1.0.0",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "dependencies": {
+    "dotenv": "^17.4.2",
+    "express": "^4.18.3",
+    "multer": "^2.0.0",
+    "puppeteer": "^22.15.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}
--- a/server/routes/ads.js
+++ b/server/routes/ads.js
@@ -0,0 +1,119 @@
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const multer = require('multer');
+const { listAds, getAd, updateAd, updateAdFile, updateAdThumbnail, deleteAd } = require('../db');
+const { captureScreenshot } = require('../utils/screenshot');
+
+const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', '..', 'uploads');
+
+const fileStorage = multer.diskStorage({
+  destination: (_req, _file, cb) => cb(null, UPLOADS_DIR),
+  filename: (_req, _file, cb) => cb(null, `${crypto.randomUUID()}.html`),
+});
+
+const uploadFile = multer({
+  storage: fileStorage,
+  fileFilter: (_req, file, cb) => {
+    if (file.mimetype === 'text/html' || file.originalname.endsWith('.html')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only .html files are allowed'));
+    }
+  },
+  limits: { fileSize: 50 * 1024 * 1024 },
+});
+
+const router = express.Router();
+
+router.get('/', (req, res) => {
+  res.json(listAds(req.query.appId));
+});
+
+router.get('/:id', (req, res) => {
+  const ad = getAd(req.params.id);
+  if (!ad) return res.status(404).json({ error: 'Not found' });
+  res.json(ad);
+});
+
+router.patch('/:id', (req, res) => {
+  const existing = getAd(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Not found' });
+
+  const { title, appId, tags, developer, repo, branch, notes } = req.body;
+  const updated = updateAd(req.params.id, {
+    title: title ?? existing.title,
+    appId: appId ?? existing.appId ?? null,
+    tags: tags ?? existing.tags ?? [],
+    developer: developer ?? existing.developer ?? '',
+    repo: repo ?? existing.repo ?? '',
+    branch: branch ?? existing.branch ?? '',
+    notes: notes ?? existing.notes ?? '',
+  });
+  res.json(updated);
+});
+
+router.post('/:id/thumbnail', express.json({ limit: '10mb' }), (req, res) => {
+  const ad = getAd(req.params.id);
+  if (!ad) return res.status(404).json({ error: 'Not found' });
+
+  const { dataUrl } = req.body;
+  if (!dataUrl || !dataUrl.startsWith('data:image/')) {
+    return res.status(400).json({ error: 'Invalid dataUrl' });
+  }
+
+  const thumbFilename = `${req.params.id}-thumb.png`;
+  const base64Data = dataUrl.replace(/^data:image\/\w+;base64,/, '');
+  fs.writeFileSync(path.join(UPLOADS_DIR, thumbFilename), Buffer.from(base64Data, 'base64'));
+
+  const updated = updateAdThumbnail(req.params.id, thumbFilename);
+  res.json(updated);
+});
+
+router.post('/:id/screenshot', async (req, res) => {
+  const ad = getAd(req.params.id);
+  if (!ad) return res.status(404).json({ error: 'Not found' });
+
+  try {
+    const port = process.env.PORT || 3000;
+    const url = `http://127.0.0.1:${port}/uploads/${ad.filename}`;
+    const buffer = await captureScreenshot(url);
+
+    const thumbFilename = `${req.params.id}-thumb.png`;
+    fs.writeFileSync(path.join(UPLOADS_DIR, thumbFilename), buffer);
+
+    const updated = updateAdThumbnail(req.params.id, thumbFilename);
+    res.json(updated);
+  } catch (err) {
+    console.error('Screenshot failed:', err.message);
+    res.status(500).json({ error: 'Screenshot failed' });
+  }
+});
+
+router.post('/:id/file', uploadFile.single('file'), (req, res) => {
+  const ad = getAd(req.params.id);
+  if (!ad) return res.status(404).json({ error: 'Not found' });
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+
+  const oldPath = path.join(UPLOADS_DIR, ad.filename);
+  if (fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
+
+  const updated = updateAdFile(req.params.id, req.file.filename);
+  res.json(updated);
+});
+
+router.delete('/:id', (req, res) => {
+  const ad = deleteAd(req.params.id);
+  if (!ad) return res.status(404).json({ error: 'Not found' });
+
+  const filePath = path.join(UPLOADS_DIR, ad.filename);
+  if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+
+  const thumbPath = path.join(UPLOADS_DIR, `${ad.id}-thumb.png`);
+  if (fs.existsSync(thumbPath)) fs.unlinkSync(thumbPath);
+
+  res.status(204).end();
+});
+
+module.exports = router;
--- a/server/routes/apps.js
+++ b/server/routes/apps.js
@@ -0,0 +1,115 @@
+const express = require('express');
+const { URL } = require('url');
+const { listApps, getApp, insertApp, updateApp, deleteApp } = require('../db');
+
+const router = express.Router();
+
+// ── store lookup helper ───────────────────────────────────────────────────────
+
+function metaContent(html, property) {
+  // handles both attribute orderings
+  const patterns = [
+    new RegExp(`<meta[^>]+property="${property}"[^>]+content="([^"]*)"`, 'i'),
+    new RegExp(`<meta[^>]+content="([^"]*)"[^>]+property="${property}"`, 'i'),
+  ];
+  for (const re of patterns) {
+    const m = html.match(re);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+async function fetchText(url) {
+  const res = await fetch(url, {
+    headers: {
+      'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36',
+      'Accept-Language': 'en-US,en;q=0.9',
+    },
+    signal: AbortSignal.timeout(10000),
+    redirect: 'follow',
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.text();
+}
+
+async function lookupAppStore(storeUrl) {
+  const m = storeUrl.match(/\/id(\d+)/);
+  if (!m) throw new Error('Could not parse App Store app ID from URL');
+  const body = await fetchText(`https://itunes.apple.com/lookup?id=${m[1]}`);
+  const data = JSON.parse(body);
+  const r = data.results?.[0];
+  if (!r) throw new Error('App not found in iTunes catalogue');
+  return {
+    name: r.trackName,
+    icon_url: r.artworkUrl512 || r.artworkUrl100 || r.artworkUrl60 || '',
+  };
+}
+
+async function lookupPlayStore(storeUrl) {
+  const m = storeUrl.match(/[?&]id=([^&]+)/);
+  if (!m) throw new Error('Could not parse Play Store package ID from URL');
+  const body = await fetchText(`https://play.google.com/store/apps/details?id=${m[1]}&hl=en`);
+  const title = metaContent(body, 'og:title');
+  if (!title) throw new Error('Could not extract app name from Play Store page');
+  const name = title.replace(/\s*[-–]\s*Apps on Google Play\s*$/i, '').trim();
+  const icon_url = metaContent(body, 'og:image') || '';
+  return { name, icon_url };
+}
+
+// ── routes ────────────────────────────────────────────────────────────────────
+
+router.get('/lookup', async (req, res) => {
+  const { url } = req.query;
+  if (!url) return res.status(400).json({ error: 'url query param is required' });
+
+  try {
+    new URL(url); // validate
+  } catch {
+    return res.status(400).json({ error: 'Invalid URL' });
+  }
+
+  try {
+    if (url.includes('apps.apple.com')) {
+      return res.json(await lookupAppStore(url));
+    }
+    if (url.includes('play.google.com')) {
+      return res.json(await lookupPlayStore(url));
+    }
+    return res.status(422).json({ error: 'URL must be an App Store or Play Store link' });
+  } catch (err) {
+    console.error('App lookup failed:', err.message);
+    res.status(502).json({ error: err.message || 'Lookup failed' });
+  }
+});
+
+router.get('/', (_req, res) => {
+  res.json(listApps());
+});
+
+router.post('/', (req, res) => {
+  const { name, ios_url, android_url, icon_url } = req.body;
+  if (!name?.trim()) return res.status(400).json({ error: 'name is required' });
+  const app = insertApp({ name: name.trim(), ios_url: ios_url || '', android_url: android_url || '', icon_url: icon_url || '' });
+  res.status(201).json(app);
+});
+
+router.patch('/:id', (req, res) => {
+  const existing = getApp(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Not found' });
+  const { name, ios_url, android_url, icon_url } = req.body;
+  const updated = updateApp(req.params.id, {
+    name: name ?? existing.name,
+    ios_url: ios_url ?? existing.ios_url,
+    android_url: android_url ?? existing.android_url,
+    icon_url: icon_url ?? existing.icon_url,
+  });
+  res.json(updated);
+});
+
+router.delete('/:id', (req, res) => {
+  const app = deleteApp(req.params.id);
+  if (!app) return res.status(404).json({ error: 'Not found' });
+  res.status(204).end();
+});
+
+module.exports = router;
--- a/server/routes/auth.js
+++ b/server/routes/auth.js
@@ -0,0 +1,25 @@
+const express = require('express');
+const crypto = require('crypto');
+
+const router = express.Router();
+
+function makeToken(password) {
+  return crypto.createHmac('sha256', password).update('showcase-session').digest('hex');
+}
+
+router.post('/login', (req, res) => {
+  const { password } = req.body;
+  const expected = process.env.SHOWCASE_PASSWORD;
+
+  if (!expected) {
+    return res.status(500).json({ error: 'Server not configured' });
+  }
+
+  if (!password || password !== expected) {
+    return res.status(401).json({ error: 'Invalid password' });
+  }
+
+  res.json({ token: makeToken(expected) });
+});
+
+module.exports = { router, makeToken };
--- a/server/routes/upload.js
+++ b/server/routes/upload.js
@@ -0,0 +1,52 @@
+const express = require('express');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const crypto = require('crypto');
+const { insertAd } = require('../db');
+const { parseTitle } = require('../utils/parseTitle');
+
+const UPLOADS_DIR = process.env.UPLOADS_DIR || path.join(__dirname, '..', '..', 'uploads');
+
+const storage = multer.diskStorage({
+  destination: (_req, _file, cb) => cb(null, UPLOADS_DIR),
+  filename: (_req, _file, cb) => cb(null, `${crypto.randomUUID()}.html`),
+});
+
+const upload = multer({
+  storage,
+  fileFilter: (_req, file, cb) => {
+    if (file.mimetype === 'text/html' || file.originalname.endsWith('.html')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only .html files are allowed'));
+    }
+  },
+  limits: { fileSize: 50 * 1024 * 1024 },
+});
+
+const router = express.Router();
+
+router.post('/', upload.single('file'), (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+
+  const html = fs.readFileSync(req.file.path, 'utf8');
+  const extractedTitle = parseTitle(html);
+  const id = path.basename(req.file.filename, '.html');
+
+  const ad = insertAd({
+    id,
+    filename: req.file.filename,
+    title: req.body.title || extractedTitle || req.file.originalname.replace(/\.html$/i, ''),
+    appId: req.body.appId || null,
+    tags: req.body.tags ? JSON.parse(req.body.tags) : [],
+    developer: req.body.developer || '',
+    repo: req.body.repo || '',
+    branch: req.body.branch || '',
+    notes: req.body.notes || '',
+  });
+
+  res.status(201).json(ad);
+});
+
+module.exports = router;
--- a/server/utils/parseTitle.js
+++ b/server/utils/parseTitle.js
@@ -0,0 +1,6 @@
+function parseTitle(html) {
+  const match = html.match(/<title[^>]*>([^<]*)<\/title>/i);
+  return match ? match[1].trim() : '';
+}
+
+module.exports = { parseTitle };
--- a/server/utils/screenshot.js
+++ b/server/utils/screenshot.js
@@ -0,0 +1,89 @@
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+
+const FINAL_SETTLE_MS = 800;
+const CANDIDATE_DELAYS_MS = [0, 500, 500];
+const EDGE_PATHS = [
+  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+];
+
+function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function getBrowserExecutablePath() {
+  if (process.env.PUPPETEER_EXECUTABLE_PATH) return process.env.PUPPETEER_EXECUTABLE_PATH;
+  return EDGE_PATHS.find(p => fs.existsSync(p));
+}
+
+async function captureScreenshot(url, width = 390, height = 844) {
+  const executablePath = getBrowserExecutablePath();
+  const browser = await puppeteer.launch({
+    headless: true,
+    executablePath,
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      '--disable-dev-shm-usage',
+      '--enable-webgl',
+      '--ignore-gpu-blocklist',
+    ],
+  });
+
+  try {
+    const page = await browser.newPage();
+    await page.setViewport({ width, height, deviceScaleFactor: 1 });
+    page.on('console', msg => console.log(`[screenshot:${msg.type()}] ${msg.text()}`));
+
+    // Unity clears WebGL buffers by default, so force readable buffers before
+    // page scripts create their contexts.
+    await page.evaluateOnNewDocument(() => {
+      const orig = HTMLCanvasElement.prototype.getContext;
+      HTMLCanvasElement.prototype.getContext = function (type, attrs) {
+        if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
+          attrs = Object.assign({}, attrs || {}, { preserveDrawingBuffer: true });
+        }
+        return orig.call(this, type, attrs);
+      };
+    });
+
+    console.log(`[screenshot] loading ${url}`);
+    await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+    try {
+      await page.waitForFunction(() => {
+        const canvases = Array.from(document.querySelectorAll('canvas'))
+          .filter(c => c.width > 0 && c.height > 0);
+        return canvases.some(c => {
+          try {
+            const d = c.toDataURL('image/png');
+            return (d.split(',')[1] || '').length > 2000;
+          } catch {
+            return false;
+          }
+        });
+      }, { timeout: 20000, polling: 500 });
+      console.log('[screenshot] canvas pixels detected');
+    } catch (err) {
+      console.log(`[screenshot] canvas readiness timed out: ${err.message}`);
+    }
+
+    // HTML overlays and Unity's first fully composited frame can lag behind
+    // canvas readiness, so capture a short burst and keep the richest PNG.
+    await wait(FINAL_SETTLE_MS);
+    let bestBuffer = null;
+    for (const delay of CANDIDATE_DELAYS_MS) {
+      if (delay) await wait(delay);
+      const buffer = await page.screenshot({ type: 'png' });
+      if (!bestBuffer || buffer.length > bestBuffer.length) bestBuffer = buffer;
+    }
+
+    console.log(`[screenshot] selected ${bestBuffer.length} bytes`);
+    return bestBuffer;
+  } finally {
+    await browser.close();
+  }
+}
+
+module.exports = { captureScreenshot };
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>