How to vibe codeReelFarm

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack application and background task runners.

• GitHubfree

  Code repository hosting and seamless integration with deployment platforms.

• Anthropic API KeyPay-as-you-go (~$10-20/mo)

  Provides the LLM intelligence required to generate slideshow hooks, text items, and captions.

• 

  TikTok Developer Accountfree

  Mandatory for obtaining API credentials and OAuth client IDs to test direct publishing workflows.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex backend queues, database schemas, and API routers.

• Cursor

  Ideal for iterative frontend UI development and fine-tuning the slideshow canvas layout editor.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a full-stack Next.js application with TypeScript, Tailwind CSS, and Turso for database storage. Set up the schema for users, TikTok accounts, slideshows, slides, text items, and automated cron jobs.

   Initialize a Next.js full-stack app with TypeScript and Tailwind CSS. Configure Drizzle ORM to connect with Turso (SQLite). Create a complete database schema with tables for users, tiktok_accounts, slideshows (fields: id, user_id, title, status, aspect_ratio, created_at), slides (fields: id, slideshow_id, image_url, image_layout, text_position, is_cta, sort_order), text_items (fields: id, slide_id, text, font_size, text_color, text_style, font, text_align), automations (fields: id, user_id, tiktok_account_id, title, style, language, status), and automation_schedules (fields: id, automation_id, cron_expression, job_id). Ensure all foreign key relations and indexes are properly structured. Provide an initial migration script and test connection utilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard Layout

   Implement authentication using better-auth and build the core SaaS dashboard layout with sidebar navigation, account switcher, and active automation overviews.

   Integrate better-auth into the Next.js app supporting email/password and Google OAuth login. Build a responsive dashboard layout featuring a collapsible sidebar, user profile card with settings dropdown, and main content area. Create React components for displaying active automations, usage counters (slideshows created, AI credits remaining), and quick navigation links to the slideshow library, automations, and API documentation views. Style everything using Tailwind CSS with a clean, modern dark mode aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Slideshow Generation Pipeline

   Build the AI generation endpoint that takes natural-language prompts, invokes the Anthropic Claude API to generate structural content, and queues an asynchronous background worker.

   Implement the POST /api/v1/slideshows/generate endpoint in Next.js. The endpoint must accept 'additional_context' (natural language prompt) and an optional 'images' array. Use the Anthropic API (Claude Sonnet) with structured JSON output mode to parse the prompt into a title, a hook slide, 3 to 7 body slides containing structured text items, and a call-to-action slide. Store the generated draft in the database with status 'generating', trigger an asynchronous background task using BullMQ, and immediately return a 201 response with the slideshow_id and status 'processing'. Include a GET /api/v1/slideshows/{slideshow_id}/status polling endpoint.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Media Rendering Engine & Pinterest Asset Sourcing

   Develop the worker pipeline that resolves image backgrounds (auto-pulling or user-provided), applies text overlays according to style parameters, and exports high-resolution frames or .mp4 videos.

   Build a background worker script using BullMQ and FFmpeg to process slideshow rendering jobs. When a slideshow reaches the rendering phase, the worker must fetch background images (or pull stock/niche images via keyword searches on Pinterest/Unsplash APIs), composite text boxes with configurable font sizes, outlines, background highlights, and vertical/horizontal anchors onto the images. If 'export_as_video' is true, compile the individual rendered slides into an .mp4 video using FFmpeg with configurable slide durations (e.g., 4 seconds per slide) and background audio tracks. Upload the compiled outputs to a Cloudflare R2 bucket and update the slideshow status to 'completed' with the associated video record.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05TikTok OAuth & Direct Publishing Integration

   Integrate TikTok OAuth login and the TikTok Content Posting API to enable secure account connection, token refreshing, and automated direct video/carousel publishing.

   Implement TikTok OAuth 2.0 authentication flow allowing users to securely link and manage multiple TikTok accounts. Store encrypted access and refresh tokens in the tiktok_accounts table. Create service modules interacting with the official TikTok Content Posting API endpoints to upload compiled media assets, handle automatic token refreshes, respect rate limits (handling 429 errors gracefully and falling back to draft modes if needed), and publish posts with captions, visibility settings, and audio permissions. Build a frontend settings view to connect, disconnect, and view linked TikTok accounts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Cron Scheduling & Automation Dispatcher

   Implement cron-based scheduling using BullMQ cron triggers to fire automated slideshow generation and TikTok publishing runs based on user-defined Pacific time schedules.

   Build the automation CRUD endpoints (POST, GET, PATCH, DELETE /automations) and schedule management sub-routes. Implement a robust background cron dispatcher using BullMQ that evaluates cron expressions in Pacific time. When a scheduled automation triggers, the worker executes a run: it selects a random hook from the automation's slideshow_hooks list, triggers the AI generation and rendering pipeline, and automatically publishes the resulting content to the linked TikTok account according to the saved 'tiktok_post_settings'. Include a one-off POST /automations/{automation_id}/run endpoint for manual trigger testing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Developer REST API & Analytics Dashboard

   Expose clean REST API endpoints (/api/v1) protected by Bearer token authentication and build an analytics tracking view to monitor post performance.

   Develop a secure API routing layer under /api/v1 authenticated via Bearer tokens (prefix 'rf_'). Implement endpoints for fetching account info, creating slideshows via direct control (POST /api/v1/slideshows/create), checking status, managing automations, and listing videos. Also build a TikTok analytics polling worker that fetches view counts, likes, comments, shares, and bookmarks via the TikTok API and renders summary metrics on the frontend analytics dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ReelFarm