How to vibe codeYouTube

Prerequisites

• Node.jsfree

  Required for running the Next.js frontend and build tooling.

• GitHubfree

  Source code repository and deployment integration.

AI coding tools

• Claude Code

  Handles full-app scaffolding, writing complex database schemas, and iterating through API routes.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js application with TypeScript and Tailwind CSS, and configure Neon Postgres with Prisma or Drizzle ORM.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Initialize Drizzle ORM connected to a Neon Postgres database. Define database schemas for users, channels, videos (including fields for title, description, muxPlaybackId, muxAssetId, views, and duration), comments, and subscriptions. Ensure proper foreign key relations between users, channels, and videos. Implement environment variable validation for database connection strings and configure a clean project directory layout.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication Integration

   Set up user authentication using better-auth to manage accounts, sessions, and channel creation.

   Install and configure better-auth in the Next.js application to handle email/password sign-up and Google OAuth login. Connect better-auth to the Neon database using Drizzle adapter. Create sign-in, sign-up, and account management pages with Tailwind CSS. Implement middleware to protect creator routes, video upload endpoints, and subscription actions. Ensure user sessions correctly populate user IDs across API routes and frontend components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Video Upload and Mux Integration

   Implement video uploading using Mux Direct Uploads to handle chunked ingestion and transcoding.

   Integrate the Mux API into the backend to generate direct upload URLs. Create a creator studio page where authenticated users can upload video files (.mp4, .mov) directly to Mux storage. Implement webhook handlers in Next.js to receive Mux processing status updates (video.asset.ready) and save the resulting playback ID, duration, and asset metadata to the Neon database. Add progress bars and error handling for failed uploads on the frontend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Video Player and Watch Page

   Build the core viewing interface featuring an adaptive bitrate video player and video details.

   Build a watch page route (/watch/[id]) that fetches video metadata and channel details from the Neon database. Integrate the Mux video player component (@mux/mux-player-react) to support adaptive bitrate streaming, playback speed controls, and full-screen mode. Below the player, display the video title, channel avatar, subscriber count, like/dislike action buttons, view count, and a formatted description box with collapsible text. Implement an increment view count API endpoint triggered on video mount.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Home Feed, Recommendations, and Subscriptions

   Develop the home feed grid, subscription management, and channel subscription feeds.

   Create the homepage feed displaying a responsive grid of video recommendation cards with thumbnails, channel names, view counts, and upload timestamps. Build a subscriptions feed page that lists recent videos exclusively from channels the current user follows. Implement subscription toggle logic with optimistic UI updates in React. Add a channel page route (/channel/[id]) showing banner art, avatar, subscriber counts, and all videos uploaded by that specific creator.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Comments and Polish

   Add interactive features like comments, nested replies, and analytics instrumentation.

   Implement a comments section below the watch page supporting top-level comments and nested replies. Create API routes for posting, updating, and deleting comments tied to authenticated users. Add search functionality querying video titles and descriptions using Postgres full-text search. Finally, integrate PostHog for event tracking (video plays, likes, subscriptions) and Sentry for error boundary monitoring across all client and server routes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for YouTube