Playbooks / Launch a paid hook and thumbnail library (the Hook Book pattern)

Launch a paid hook and thumbnail library (the Hook Book pattern)

Launch a paid hook and thumbnail library (the Hook Book pattern)

Coming

React + Vite SPA on Supabase auth with admin and client roles, hook cards with tags and analysis, favorites, client assignments, Stripe checkout with a webhook that provisions the paid account, Apify for view counts, yt-dlp for thumbnails.

Kit

No separate kit. The playbook is self-contained.

You need

AccountWhyFree or paidPlan
SupabasePostgres database, auth (dashboard logins), row level security, Realtime pulse, Edge Functions and pg_cron for every dashboard, the attribution tables, booking alerts and the Brain state.Free tier availablePro (25 USD/mo) for anything a client logs into. The free tier pauses a project after 7 days without traffic and caps an org at 2 active projects; a paused free project took three client dashboards offline at once (a project log).
VercelHosts every site, funnel, dashboard and serverless API (subscribe, book, attribution, AC proxy). Runs the cron jobs declared in vercel.json.Free tier availablePro (20 USD/mo per seat). The Hobby plan forbids commercial use, so any client site or paid product must be on Pro. Hobby is fine for a personal portfolio.
StripePayments for the Hook Book (checkout + webhook provisions the account) and sale events for first-party attribution.FreeNo monthly fee; 2.9% + 30c per card charge. Pick Stripe OR PayPal before wiring attribution.
ApifyScrapers (Instagram reels, Skool posts, TikTok) used by the n8n research workflows and the Hook Book's view counts.Free tier availableFree (5 USD monthly credit) runs the weekly Skool digest; Starter (39 USD/mo) for the daily IG research agent.
yt-dlpDownloads YouTube, TikTok and Instagram video, auto-captions and comments for vaults, B-roll, MIDI extraction and quote verification.FreeFree.
Node.js 24 (npm, npx)Runs Claude Code, the Vercel CLI, HyperFrames renders, Playwright, the MCP servers and every serverless function locally.FreeFree. Node 24 LTS (the Brain MCP server and Vercel functions target Node 24).

What you bring

  • Your own curated hooks
  • Your payment processor product and price

The steps

  1. Create the accounts and the env
  2. Scaffold the app
  3. Create the tables and RLS
  4. Build auth with the four-layer gate
  5. Wire Stripe checkout and account provisioning
  6. Load your hooks, thumbnails and view counts
  7. Deploy and verify both roles in Safari

Get the full playbook

Plug in your AI Read it in the Library

Part of: Get your database sorted