Snipvis OS — Creator Research Lab

A high-density fullstack creator intelligence and production management platform designed for video creators, YouTube strategists, and editors to deconstruct viral packaging, extract retention hook mechanics with multimodal AI, and translate research directly into structured production briefs and scripts.

Next.js 14TypeScriptPostgreSQLPrismaTailwind CSSTanStack QueryNextAuth.jsCloudflare R2DeepSeek AI

View Live View Source

Overview

Top video creators and YouTube strategists rely heavily on reverse-engineering viral packaging (thumbnails, retention hooks, title formulas) and competitor outliers. However, the existing workflow is heavily fragmented across random browser bookmarks, messy spreadsheets, Notion tables, and Google Drive folders. Snipvis OS was engineered as a high-density, centralized research lab that bridges the gap between competitive intelligence and active video production.

The Problem

Creative teams waste hours tracking high-performing videos without a systematic way to analyze why they worked or apply those insights to active video pipelines. Key pain points include: 1. Fragmented research: Thumbnails and titles are saved in disparate screenshot folders without contextual retention or multiplier data. 2. Disconnected pre-production: Creative briefs and video scripts are isolated from reference assets and licensed media. 3. Lack of automated breakdown: Manual analysis of thumbnails and opening hook structures is slow and inconsistent across creative team members.

The Solution

Snipvis provides an end-to-end creator operating system featuring: 1. Instant Packaging Capture: Auto-resolves YouTube oEmbed metadata and max-res thumbnails with zero API key dependencies. 2. Multimodal AI Hook Breakdown: Evaluates visual contrast, emotional triggers, title variants, and retention formulas via DeepSeek vision models. 3. Project Workspace & Script Briefs: Organizes research into active production pipelines with rich WYSIWYG video scripting, hook targeting, and licensed asset boards (Pexels, Pixabay, Mixkit). 4. Competitor & Outlier Radar: Tracks velocity multipliers, upload frequency, and reproducible video concepts across monitored channels.

Design Flow

Step 1: Creator Workflow Mapping — Analyzed 50+ hours of creator research workflows to identify friction points between inspiration gathering and scripting.

Step 2: High-Density UI Prototyping — Designed a tactile "Dark Studio / Creator Paper" design system optimized for information density and fast visual scanning.

Step 3: Multi-Tenant Architecture & Schema Design — Modeled relational data in PostgreSQL with composite join tables for project-specific inspiration notes.

Step 4: Fullstack Consolidation — Built unified Next.js 14 App Router API handlers with TanStack React Query v5 and a swappable Cache-Aside layer.

Step 5: Media & AI Pipeline Integration — Integrated Cloudflare R2 S3-compatible asset storage and DeepSeek multimodal vision analysis for automated thumbnail critiques.

Step 6: Production Polish & Type Safety — Enforced strict TypeScript (zero `any`), Biome linting, and comprehensive database migration controls.

Schema Design

PostgreSQL database managed with Prisma ORM (PrismaPg driver adapter) featuring tenant-isolated relational models:
- User & Account / Session: Multi-tenant authentication core with NextAuth.js.
- Project: Production workspace container tracking video status (ACTIVE/DONE), scripts, and creative briefs.
- Inspiration: Repository of captured packaging (thumbnails, title formulas, retention hooks, AI strength scores, and risk flags).
- ProjectInspiration: Many-to-many join model linking global vault inspirations to specific projects with local contextual notes and favorite flags.
- Asset & ProjectAsset: Centralized catalog of licensed video, audio, font, and image production cues mapped to projects.
- Channel & Competitor: Monitored channels, subscriber velocity, average view benchmarks, and outlier tracking.

Technical Decisions

Single Next.js 14 Monorepo: Consolidated UI and REST route handlers into one repo to eliminate cross-origin CORS overhead and simplify Vercel deployment.
Prisma 7 with pg.Pool Adapter: Utilized the PrismaPg driver adapter for robust TCP connection pooling against Supabase PostgreSQL.
Cache-Aside Architecture: Implemented an in-memory/Redis-swappable cache store to achieve sub-50ms reads on high-frequency project queries while invalidating on mutations.
TanStack React Query v5: Managed client-side server state, optimistic updates, and declarative cache invalidations.
Zod Runtime Schema Validation: Unified validation across API route handlers and client form payloads with inferred TypeScript types.
Tailwind CSS with Custom CSS Variables: Built a bespoke, high-density dark studio aesthetic with tactile button micro-interactions and instant theme switching.
Cloudflare R2 Object Storage: Leveraged S3-compatible presigned URLs for cost-effective asset uploads and low-latency global CDN delivery.

Challenges

Challenge 1: Scraped YouTube oEmbed and high-res thumbnail resolutions reliably without requiring end-users to provide restricted Google Cloud API keys.
Challenge 2: Modeled many-to-many relationships with project-specific contextual notes using a composite primary key (projectId, inspirationId) in Prisma.
Challenge 3: Prevented cache drift by engineering automatic cache invalidations on relational mutations across projects and tagged inspiration sets.
Challenge 4: Maintained zero TypeScript `any` types across complex external AI payloads and dynamic YouTube oEmbed responses using Zod runtime parsing.

Key Learnings

Learning 1: High-density, keyboard-driven UI design dramatically improves daily retention for creator and editorial power users compared to generic SaaS cards.
Learning 2: Cache-Aside pattern combined with TanStack Query provides instant client navigations while keeping database pool contention near zero.
Learning 3: Strict relational schemas and explicit foreign keys prevent orphaned assets in multi-user creative workflows.
Learning 4: Version-controlled Prisma migrations prevent catastrophic schema drift in serverless fullstack environments.

Results

- Sub-100ms API response times achieved through Cache-Aside caching and connection pooling. - 70% reduction in pre-production research time by linking viral inspiration analysis directly into project scripts. - 100% strict TypeScript type safety with zero `any` declarations across the entire codebase. - Deployed a production-ready, fully responsive creator intelligence lab with seamless dark/light studio theming.

Loading content...