How to vibe codeCineSend

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js admin dashboard and API routes

• GitHubfree

  Source control and deployment pipeline integration

• 

  AWS AccountPay-as-you-go

  Required for S3 object storage and CloudFront CDN configuration for media hosting

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features, database schemas, and API integrations directly from your terminal

• Cursor

  AI-native code editor ideal for iterative UI polish on the screener dashboard and player components

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth for administrative user management, and set up Turso SQLite schemas for media assets, screeners, access logs, and user permissions.

   Scaffold a new Next.js 16 full-stack web application using TypeScript and Tailwind CSS v4. Set up better-auth to handle user authentication with email/password and organization roles. Configure Drizzle ORM to connect with a Turso SQLite database. Create database tables for 'media_assets' (id, title, original_filename, s3_key, duration, file_size, created_at), 'screeners' (id, asset_id, recipient_email, passcode, expires_at, view_count, max_views, watermarked_text, is_active), and 'screener_analytics' (id, screener_id, viewer_ip, watched_seconds, timestamp). Implement secure API endpoints for creating media records and generating unique secure screener sharing links with validation checks for expiration and view count limits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Cloud Storage & Chunked Upload Pipeline

   Implement secure direct-to-S3 pre-signed URL uploads supporting large media asset ingestion with resume capabilities.

   Implement a chunked media upload pipeline in Next.js using AWS S3 SDK v3. Create an API endpoint that generates S3 multipart pre-signed upload URLs for large video files (ProRes, MP4, MOV). Build a React frontend upload dashboard component with drag-and-drop support, real-time upload progress bars, chunk retry logic, and file verification. Once an upload completes successfully, trigger a backend job entry in the Turso database to register the media asset status as 'processing' and log metadata such as file size and original filename.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Video Transcoding and Watermark Pipeline

   Build a worker script utilizing FFmpeg to transcode uploaded source videos into adaptive HLS streams and apply dynamic visible watermarks.

   Build a Node.js background processing worker that pulls pending video assets from the S3 storage bucket, downloads them locally, and uses FFmpeg to transcode them into adaptive bitrate HLS (HTTP Live Streaming) manifests (.m3u8 and .ts segments). Implement a dynamic watermarking function in FFmpeg that burns a semi-transparent text overlay (such as the recipient's email address or IP address) dynamically onto video frames during transcoding to deter unauthorized screen recording. Upload the resulting HLS segment folders back to an AWS S3 destination bucket structured for CloudFront CDN distribution.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Secure Screener Viewing Portal

   Develop a protected web player interface featuring adaptive HLS streaming, token verification, and security restrictions.

   Create a secure screener viewing portal page in Next.js accessed via unique tokens (`/screener/[token]`). Implement backend validation middleware that verifies whether the screener token is active, unexpired, and under its maximum view limit. Integrate Video.js or Shaka Player on the frontend to stream the adaptive HLS output from AWS CloudFront. Implement client-side anti-piracy countermeasures: disable right-click context menus on the video element, detect and pause playback if the browser window loses focus or screen recording extensions are suspected, and render a floating, slow-moving user-specific watermark overlay across the player canvas based on the recipient's metadata.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Analytics Dashboard and Access Control Logs

   Build comprehensive tracking views and heatmaps to monitor screener engagement and reviewer playback activity.

   Build an administrative analytics dashboard in Next.js that displays aggregated metrics and granular reviewer activity logs. Create API routes that ingest heartbeat analytics pings from the screener video player (tracking played duration, timestamps, and drop-off points). Design interactive charts using Tailwind and Lucide icons that visualize overall screener performance, view counts by geography, and individual reviewer engagement heatmaps to help administrators audit who watched what and when.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for CineSend