# How to Vibe Code Your Own VHS Slipcover Maker (and Stop Paying for It) > Design printable VHS slip boxes and retro media packaging - Site: https://vhs.texs.org - Category: Web App - Platforms: Web app - Verdict: **Solid side project** (75/100 vibecodeable) - Estimated effort: 2 weeks part-time ## Verdict Build a personal clone for your own custom media collection, but skip trying to replicate the viral community brand. The core loop—querying TMDB for metadata and rendering posters onto a scaled canvas template with distressed overlays—is entirely buildable as a side project. The tedious part is getting the print dimensions, spine calculation math, and fold bleeds pixel-perfect for physical cutting and gluing on heavy cardstock. ### What you can't replicate - The exact community goodwill, Webby nomination, and organic portfolio traffic of Tex Jernigan's brand ## What it does A niche web-based design utility for hobbyists and collectors to search movie metadata, pull posters and logos via TMDB, and layout custom print-ready retro media packaging. ### Core features - TMDB API integration for movie/TV metadata and poster art search - Interactive layout engine for oversized print dimensions (Tabloid 11x17" / A3) - Dynamic canvas/SVG rendering with vintage textures, shelf wear, and fold lines - Configurable parental advisory decals, rental store stickers, and barcodes - Multi-generator suite (VHS, Betamax, Cassette J-cards, Vinyl, MiniDisc) - Print-ready PDF and high-resolution PNG export pipeline ## The business ### Pricing - Free: Free - Premium / Upgrade Tier: Custom Founded 2025. Team size: 1. ## The hard parts - Precise millimeter-accurate print scaling and fold geometry for physical die-cuts - Client-side canvas composition combining high-res posters with distressed vintage overlays - Dynamic spine-width calculation scaling automatically with tape runtimes or media thickness ## How to vibe code VHS Slipcover Maker ### Prerequisites - Node.js (free): Runtime environment for Next.js development - GitHub (free): Source control and deployment pipeline - TMDB API Key (free): Required to fetch movie and TV show posters, metadata, and studio logos ### Recommended AI tools - Claude Code: Handles multi-file Next.js scaffolding, canvas layout logic, and API route setup efficiently from the terminal. - Cursor: Ideal for fine-tuning the intricate CSS print media queries and interactive drag-and-drop generator UI. ### Stack - Frontend: Next.js with Tailwind CSS and HTML5 Canvas / SVG manipulation - Backend: Next.js API Routes - Database: Turso (SQLite at the edge for saving user templates if needed) - Auth: better-auth - Payments: Stripe - Other: jsPDF or html2canvas for print export, TMDB REST API client ### Hosting - Vercel (Hosting the Next.js frontend and serverless API routes fetching TMDB data.): $0/mo ### Build guide 1. **Project Scaffolding & Tailwind Setup** — Initialize a Next.js TypeScript project with Tailwind CSS and install essential utility packages for canvas handling and icons. ``` Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install lucide-react for icons and canvas-confetti. Set up a clean layout shell with a retro vintage aesthetic, dark background, and a responsive top navigation bar matching a design tool layout. ``` 2. **TMDB API Integration & Search Bar** — Build an autocomplete search component that queries The Movie Database API for movie and TV show metadata, posters, and production logos. ``` Create an API route in Next.js at /api/search that accepts a query parameter and proxies requests to The Movie Database (TMDB) API search/multi endpoint using process.env.TMDB_API_KEY. Build a React search input component with debounced autocomplete dropdown showing movie posters, release years, and titles. When a user selects a result, fetch detailed movie info including credits, runtimes, and studio logos. ``` 3. **Canvas Layout Engine for VHS Slipcovers** — Implement the interactive layout canvas that maps fetched metadata and poster art onto a physical print template with fold lines and spines. ``` Build an interactive HTML5 Canvas or SVG component in React that renders a VHS slipcover template scaled for Tabloid (11x17") printing. The canvas must include designated areas for front poster art, back synopsis, spine text, rating box (MPAA), and studio logo. Add state controls allowing users to adjust background colors, toggle font styles, and select different poster variations from the fetched TMDB assets. ``` 4. **Retro Overlays & Sticker Customization** — Add aesthetic customization layers including shelf wear textures, sun fading, creased edges, parental advisory stickers, and rental store barcodes. ``` Extend the slipcover editor with a customization sidebar. Implement toggleable vintage overlay layers using SVG filter effects or semi-transparent blend modes for shelf wear, sun fading, and corner creasing. Add a sticker picker component allowing users to drag and place parental advisory badges, price tags, and vintage video rental store barcode stickers onto the slipcover canvas. ``` 5. **Print-Ready PDF/PNG Export & Printing Guide** — Implement high-resolution export functionality formatted specifically for 11x17" or A3 paper dimensions, complete with fold and cut instructions. ``` Implement an export module using html2canvas or jsPDF that captures the canvas layout at high resolution (300 DPI equivalent) formatted for Tabloid 11x17" / A3 paper size with explicit bleed and fold guide lines. Add a modal presenting clear instructions on print scaling (100% actual size), cardstock recommendations, and assembly steps. ``` ### Cost vs paying **Starting costs (one-time):** - TMDB API Account: Free - AI Coding Assistant: $20 - Total: ~$20 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0/mo - Total: $0/mo - Paying for the SaaS instead: Free / Custom tier - Build time: 15-25 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: N/A (Personal build) ## Sources - [VHS Slipcover Maker - Main Site](https://vhs.texs.org) - [Tex Jernigan Portfolio Hub](https://texs.org)