YouTube-like POC with Custom Overlay Controls

Overview This is a Next.js 14 POC that mimics YouTube UX but with a custom top overlay control bar on tap/click. It uses:

• Next.js App Router + TypeScript + Tailwind
• NextAuth (Google) for sign-in
• Prisma ORM with Postgres (Neon recommended)
• YouTube Data API v3 for search/metadata
• YouTube IFrame Player API for playback (native controls hidden)

Key Features

• Google sign-in (NextAuth)
• Search page powered by server route calling YouTube Data API
• Watch page with custom top overlay controls (Mini-player placeholder, Autoplay toggle, CC toggle, Speed menu, Quality menu, Settings)
• Related videos and Comments (read-only)
• Watch history and user preferences persisted per account
• Home: Continue Watching section
• Library: History list

Local Development

1. Install deps pnpm i

2. Configure env cp .env.local.example .env.local Fill:

   • DATABASE_URL
   • NEXTAUTH_SECRET
   • GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET
   • YOUTUBE_API_KEY
   • NEXTAUTH_URL=http://localhost:3000

3. DB migrate pnpm prisma migrate dev

4. Run pnpm dev Visit http://localhost:3000

Environment Variables

• DATABASE_URL: Postgres connection string (Neon recommended)
• NEXTAUTH_SECRET: random string for NextAuth
• GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET: OAuth web client
• YOUTUBE_API_KEY: server-side API key (never exposed to client)
• NEXTAUTH_URL: base URL (only needed locally)

Server Routes (avoid exposing YouTube key)

• /api/youtube/search?q=&pageToken=
• /api/youtube/videos?id=
• /api/youtube/related?videoId=&pageToken=
• /api/youtube/comments?videoId=&pageToken=
• /api/user/preferences [GET/POST]
• /api/user/history [GET/POST]

Deploy on Vercel

1. Import the GitHub repo into Vercel.
2. Set env vars for Production and Preview:
   • DATABASE_URL = your Neon URL
   • NEXTAUTH_SECRET
   • GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET
   • YOUTUBE_API_KEY
3. In Google Cloud Console add OAuth redirect: https://YOUR-VERCEL-DOMAIN/api/auth/callback/google
4. Deploy. Optionally run migrations with: pnpm prisma:migrate:deploy

Notes and Limitations

• We do not alter ads or YouTube branding and do not rehost content.
• Quality/Speed options depend on IFrame API availability per video.
• Comments are read-only; likes/subscriptions write are out of scope for POC.

Attribution Requested by Tariq (@talyami). Assisted by Devin.