The Underdog: From Life Changing Accident to $100M/Year
Prompt 0 — Product spec + stack decision (paste into Cursor)
You’re my senior product engineer. We’re building “Underdog Notes”:
Input: a YouTube URL
Output: a clean “story intelligence” page: chapter timeline, key quotes, lessons, metrics, and an action plan.
Core screens:
Landing: paste URL, import
Video page: player + transcript viewer + auto chapters + takeaways
Notes: user highlights + saved insights
Library: saved videos
Must-haves:
Chapters from transcript timestamps
8–12 “Key Moments” with quotes
“Metrics & Proof” section (e.g. $30k Indiegogo, $10M/mo) extracted when present
“Action Plan” generated from lessons (5–10 tasks)
Save/share a video summary page
Tech:
Next.js (App Router) + TypeScript + Tailwind
Database + auth: Supabase
LLM: OpenAI (for summarization + extraction)
Transcript retrieval: use YouTube transcript package when possible; also allow manual transcript paste fallback
Deliverables:
Repo structure, data model, API routes, UI components, and a staged implementation plan.
Start by writing a concise PRD, then propose the DB schema, then the folder structure.
Prompt 1 — Scaffold the app + UI layout
Create the Next.js app (App Router) structure and implement the UI skeleton:
/ (Landing): URL input, “Import” button, recent imports list
/v/[id] (Video page): 2-column layout
Left: video player embed + “Generate Insights” button
Right: tabs: Transcript / Chapters / Takeaways / Action Plan / Notes/library (Library): saved videos table/cards
/settings (Settings): API key status, account, theme
Use Tailwind, clean minimal style, responsive.
Include components: Navbar, Container, Card, Tabs, Skeleton loaders, Toasts.
Provide the full file tree and code for each file you touch.
Prompt 2 — Supabase auth + schema (migrations)
Add Supabase:
Email magic link auth (simple)
DB tables + RLS policies + typed client
Tables:
users (handled by Supabase auth)
videos: id (uuid), user_id, youtube_url, youtube_id, title, channel, duration_sec, imported_at
transcripts: id, video_id, language, raw_text, raw_json (optional), created_at
insights: id, video_id, model, chapters_json, moments_json, takeaways_md, metrics_json, action_plan_json, created_at
notes: id, video_id, user_id, start_sec, end_sec, quote, note, created_at
Add indexes and RLS so users only access their own.
Generate SQL migrations and a small TypeScript “db.ts” wrapper.
Then wire auth gates for /library and /v/[id] pages.
Prompt 3 — YouTube import pipeline (URL → video metadata)
Implement importing a YouTube URL:
Validate URL, extract videoId
Fetch basic metadata (title, channel, thumbnail, duration if possible)
Save into videos table
Navigate to /v/[id]
Create:
POST /api/import-youtube: {youtubeUrl} -> returns video record
A safe URL parser util with unit tests
UI: show errors, loading, and recently imported items.
If metadata fetch is tricky, stub with placeholders but structure the code so it’s easy to swap in a real provider later.
Prompt 4 — Transcript ingestion (auto + manual fallback)
Implement transcript ingestion:
Option A: auto-fetch transcript by youtubeId using a transcript library (server-side).
Option B: manual paste fallback UI (textarea) if auto fetch fails.
Add:
POST /api/transcript/fetch: {videoId} -> stores transcripts.raw_text and optionally a timestamped array.
POST /api/transcript/paste: {videoId, text} -> stores raw_text.
On /v/[id], show transcript in a scrollable viewer and allow “Copy timestamp link” behavior.
Make sure transcript entries preserve timestamps in seconds.
Add robust error messages when YouTube blocks transcript fetching.
Prompt 5 — LLM “Insights” generation (chapters, moments, takeaways, metrics, action plan)
Add an “Insights generator”:
Button on /v/[id] triggers POST /api/insights/generate
Input: transcript with timestamps (or best-effort segmentation)
Output saved to insights table:
chapters_json: [{title, start_sec, end_sec, summary}]
moments_json: [{title, timestamp_sec, quote, why_it_matters}]
takeaways_md: markdown list
metrics_json: [{label, value, context, timestamp_sec}]
action_plan_json: [{task, why, difficulty(1-5), timeframe, related_moment_index}]
Use OpenAI responses in strict JSON (Zod validate).
Include prompt engineering:
Chapters should match narrative beats (origin, struggle, turning point, growth, lesson)
Moments must include direct quotes from transcript
Metrics must only include numbers present in transcript; otherwise omit
Add rate limiting per user and a “regenerate” option.
Prompt 6 — Timeline + Chapters UI (click to jump)
Build the Chapters experience:
Render chapters as a vertical timeline with start times
Clicking a chapter jumps the video player to start_sec
Also scrolls transcript to that timestamp
Highlight the active chapter based on current playback time
Implement a small client-side player controller:
embed YouTube iframe with JS API
expose currentTime updates
sync state to the UI
Also add “Key Moments” cards with quote + jump button.
Prompt 7 — Notes & highlights (user annotations)
Implement user notes:
From transcript: user can highlight a range (or pick a line) and click “Add note”
Save note with start_sec/end_sec and quote text
Notes tab shows a list with timestamp jump + edit/delete
Add:
Notes API routes (CRUD)
Optimistic UI updates
A “My takeaways” textarea per video (stored in insights or a separate table—choose best design)
Prompt 8 — Shareable “Story Summary” page
Create a public share page: /share/[shareId]
Generates a shareId per video insight (user-controlled toggle)
Public page shows: title, chapters, key moments, takeaways, metrics, action plan
No private notes unless explicitly included
Add “Copy link” button
Add DB support:
shares: id, video_id, user_id, is_public, created_at
RLS: only owner can create/update; public read only when is_public=true.
Prompt 9 — Make it feel premium (polish pass)
Polish the whole product:
Empty states, skeletons, loading spinners
Better typography for takeaways markdown
“Jump to timestamp” micro-interactions
Toast notifications
Error boundaries and retry UI
Mobile layout improvements
Add basic analytics events (client logs only)
Also add a seed/demo mode that loads a built-in sample transcript so the app can be demoed without YouTube access.
Prompt 10 — Tests + hardening
Add tests and hardening:
Unit tests for URL parsing + transcript formatting
Integration test for import endpoint
Zod validation for all API inputs/outputs
Security: sanitize any user-pasted transcript
Logging: structured logs for insight generation failures
Cost controls: max transcript length, chunking strategy, caching
Finish with a short README: setup, env vars, Supabase config, and deployment steps.