Loading scaffold…
Loading scaffold…
Record + upload + share + analytics — yours to fork into a tutorial library, a sales demo vault, internal training. The code is yours. Forever.
Click a video on the left. Watch the simulated playback. See who watched what — and how far they got. Reactions and views live on your infra.
This is a live mock. Same UX you ship after pasting PROMPT.md into Claude Code.
Same record-and-share UX. Different ownership model. The four things that get capped once your team needs more videos.
| Comparison axis | Loom | Need for Build scaffold |
|---|---|---|
| Pricing | $12.50–22 per creator, per month. Free plan caps recording length and library size. | Free forever. No per-creator tax. No view caps. No length caps. |
| Data ownership | Their cloud hosts your videos. Atlassian owns the company. | Your S3 bucket (or Mux / Cloudflare Stream). Your CDN. Your videos. |
| Privacy | Their compliance posture. AI summary opt-outs by plan. | RLS-scoped per workspace. No AI training. Per-video access policies. |
| Extensibility | Their player, their embeds, their reactions. | Full Next.js + Mux source. Custom player, custom analytics, custom integrations — today. |
Every file the scaffold ships, with size and one-line description. Download once, build forever.
CLAUDE.md7.2 KBProject config for Claude Code — tech stack, commands, code style, critical rules. Under 100 lines, read first.
ARCHITECTURE.md12.3 KBDrizzle schema for workspaces, videos, viewer_events, comments. Mux upload/HLS pipeline, signed playback, Realtime view counter, share-link protocol.
PRD.md8.9 KB13 features (F1–F13): browser recording, chunked upload, HLS playback, share links (password/expiry), viewer analytics (views/completion/heatmap), inline comments, transcription.
SECURITY.md12.4 KBSTRIDE threat model, OWASP 2025 Top 10, Mux signed playback URLs, share password + expiry, anonymous viewer session tokens, GDPR data inventory.
MARKETING.md10.5 KBPositioning vs. Loom/Vidyard/Tella, persona, GTM phases, channel strategy, growth loops.
PROMPT.md12.9 KB7 sequential steps: foundation → DB schema + RLS + Realtime → auth + onboarding + workspaces → browser recording → chunked upload to Mux → HLS playback + share links + viewer analytics → comments + transcription + library + billing + polish.
ARCHITECTURE_CROSSCHECK.md26.0 KBSecond-opinion architecture review: GPT + Gemini independently critique the plan, consolidated into confirmations, corrections, and concrete diffs.
api-guide.html7.3 KBZero-jargon visual guide (opens in your browser): create accounts, get API keys, fill .env, push to GitHub, deploy on Vercel.
lib/mock/index.ts3.6 KBTyped mock dataset — click through the full UI with realistic data before connecting real services.
assets/manifest.json0.3 KBMachine-readable package inventory with generation timestamps.
Mux / Cloudflare Stream + Drizzle + react-player — chunked uploads + HLS streaming.
Public video pages ISR-rendered; owner dashboard via Server Components with client islands for the recorder + player.
Workspaces own their videos. Realtime CDC on viewer_events powers the live view counter.
Chunked resumable upload → Mux HLS encoding + adaptive bitrate + signed playback URLs; hls.js for cross-browser playback.
In-browser camera + screen recording with a Canvas camera-bubble overlay — no native app.
Background Mux reconciliation, heatmap rollup, comment notifications, and opt-in Whisper transcription.
tRPC for the owner dashboard, REST for public viewer endpoints; Stripe Checkout billing; Resend for comment/invite emails.
Start from video sharing, end up shipping a tutorial vault, a sales demo library, training onboarding.
videos → product tutorials · tagged by feature · gated by user tier · own the library forever
videos → product walkthroughs · viewer analytics per AE · auto-create CRM activity on watch
videos → daily team check-ins · time-limited links · auto-purge after 30 days
videos → in-app guide · per-step viewer analytics · own who sees what
videos → HR/security training · completion certificate · audit log inside your warehouse
Every directory, every route, every migration. What you'll see right after `unzip`.
async-video-sharing/
├── CLAUDE.md
├── PROMPT.md
├── README.md
├── ARCHITECTURE.md
├── PRD.md
├── SECURITY.md
├── MARKETING.md
├── design-tokens.css
├── logo.svg
├── .env.example
├── next.config.ts
├── tailwind.config.ts
├── drizzle.config.ts
├── tsconfig.json
├── package.json
├── app/
│ ├── layout.tsx
│ ├── (auth)/login/page.tsx
│ ├── auth/callback/route.ts
│ ├── (dashboard)/
│ │ ├── videos/{,[id],[id]/analytics}/page.tsx
│ │ └── settings/{members,api-keys}/page.tsx
│ ├── (public)/v/[shareId]/page.tsx (ISR)
│ └── api/
│ ├── trpc/[trpc]/route.ts
│ ├── events/track/route.ts (edge runtime)
│ ├── comment/route.ts
│ ├── share/verify/route.ts
│ ├── inngest/route.ts
│ └── webhooks/{mux,stripe}/route.ts
├── components/
│ ├── recorder/{capture,camera-bubble,controls}.tsx
│ ├── player/{hls-player,heatmap,comments}.tsx
│ └── analytics/{views,completion,heatmap-chart}.tsx
├── server/
│ ├── api/routers/{video,share,comment,workspace}.ts
│ ├── services/{mux,playback,analytics}.ts
│ └── inngest/functions/{mux-reconcile,transcribe,heatmap-rollup,notify}.ts
├── lib/
│ ├── env.ts
│ ├── supabase/{client,server,admin,realtime}.ts
│ ├── auth/helpers.ts
│ ├── mux/{client,upload,playback}.ts
│ └── rate-limit.ts
├── types/
├── middleware.ts
├── tests/e2e/
└── supabase/migrations/
├── 0001_initial.sql
├── 0002_rls_policies.sql
└── 0003_indexes.sqlEach one ships the same way: paste PROMPT.md into Claude Code and ship.
Notion-inspired
Notion-style workspace, code-owned. Fork into wiki, KB, CRM, recipe vault, project hub.
View scaffold →Slack-inspired
Channels + DM + threads + realtime presence. Fork into customer chat, community platform, internal team tool.
View scaffold →Cal.com-inspired
Cal.com-style scheduling, code-owned. Self-host multi-host bookings + Stripe payments. Fork into consultations, classes, restaurant reservations.
View scaffold →Linktree-inspired
Personalized bio page + click tracking + UTM + theme presets. Fork into creator landing, portfolio, event page, app smart-link.
View scaffold →Gorgias-inspired
Gorgias-style e-com helpdesk, code-owned. Widget + agent inbox + Shopify order context + AI replies. Fork into support, sales chat, onboarding bot.
View scaffold →Mailchimp-inspired
List management + drag-drop editor + automation triggers. Fork into newsletter, drip campaigns, transactional service.
View scaffold →Zapier-inspired
Zapier-style automation builder, code-owned. Trigger nodes + action nodes + run history. Fork into approval flows, lead routing, sync jobs.
View scaffold →Hubspot-inspired
Contacts + deals + pipeline stages + email tracking + activity log. Fork into B2B CRM, partner pipeline, investor relations.
View scaffold →Patagon.ai-inspired
WhatsApp AI lead qualification, code-owned. Conversational qualifier + Meta CAPI + Google Calendar + CRM sync. Fork into automotive, real-estate, education, healthcare funnels.
View scaffold →