ReelFarm

Prerequisites

• Node.jsfree

  Runtime environment for backend services and full-stack framework

• GitHubfree

  Source control and automated deployment trigger

• 

  TikTok Developer Accountfree

  Required to get client keys for OAuth and the Content Posting API

AI coding tools

• Claude Code

  Primary agentic CLI tool to scaffold and iterate across the full-stack codebase

• Cursor

  Ideal editor for reviewing code diffs, adjusting UI components, and manual touch-ups

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Supabase client bindings, and establish database migrations for users, connected TikTok accounts, slideshow drafts, and automations.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and standard directory structure. Set up Supabase authentication and client integration. Create PostgreSQL migration files in Supabase for the following tables: `users` (id, email, created_at), `tiktok_accounts` (id, user_id, access_token, refresh_token, open_id, username, token_expires_at), `slideshows` (id, user_id, status ['draft', 'generating', 'rendering', 'completed', 'failed'], title, aspect_ratio, payload jsonb, created_at), `videos` (id, slideshow_id, status, video_url, error_message, created_at), and `automations` (id, user_id, tiktok_account_id, title, hooks jsonb, schedule jsonb, status, created_at). Ensure proper foreign key constraints, indexes on user_id, and row level security policies where applicable.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02TikTok OAuth & Account Integration

   Implement TikTok login authorization flow, token exchange handlers, and account connection dashboard views.

   Build the TikTok OAuth 2.0 integration for Next.js. Create a route `/api/auth/tiktok` that redirects users to TikTok's authorization page requesting scopes for user info and content posting (`user.info.basic`, `video.publish`, `video.upload`). Build the callback endpoint `/api/auth/tiktok/callback` to securely exchange the authorization code for access and refresh tokens, encrypt them if necessary, and store them in the `tiktok_accounts` table linked to the authenticated user. Build a React dashboard settings page where users can view connected TikTok accounts, click 'Connect TikTok', and see active account handles and connection status.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Slideshow Generation & Editor Interface

   Build prompt-based slideshow generation using LLMs and an interactive manual editor to tweak slide layouts, image URLs, and text styles.

   Implement the slideshow generation and editing features. Create a backend API endpoint `POST /api/v1/slideshows/generate` that takes `additional_context` and optional `images`, sends a prompt to Anthropic or OpenAI API structured to return a JSON array of slides (with hooks, body points, text colors, and layouts), saves the record as a draft, and triggers an asynchronous processing function. Create a corresponding manual creation endpoint `POST /api/v1/slideshows/create` for precise multi-slide payloads matching the ReelFarm API specs. Build a rich dashboard frontend slideshow editor with preview cards, aspect ratio toggles ('4:5', '9:16'), text positioning options, font selection ('TikTokDisplay-Bold', 'BebasNeue-Regular'), and overlay opacity sliders.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Asynchronous Rendering & Video Export Pipeline

   Build background background workers that compile slide images and text overlays into downloadable image sequences and exported MP4 video files.

   Build an asynchronous background rendering worker using Node.js and a queue (or Cloudflare Workflows / background tasks) that processes slideshows when status moves from `generating` to `rendering`. Implement image downloading and composition using canvas or html-to-image utilities, drawing text boxes with correct outlines, backgrounds, and vertical anchors. If `export_as_video` is true, compile frames into an MP4 video file using ffmpeg-wasm or a server-side FFmpeg binary. Update the `videos` table with the resulting Cloudflare R2 storage URL and transition the slideshow status to `completed` or `failed`. Provide status polling endpoints at `GET /api/v1/slideshows/{id}/status` returning granular progress.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automations & Cron Scheduler

   Implement recurring cron schedules for automated slideshow generation and publishing.

   Build the automations backend and CRUD endpoints (`POST /automations`, `GET /automations`, `PATCH /automations`, `DELETE /automations`). Implement a cron runner service (using node-cron or serverless cron triggers) that evaluates active automation schedules in Pacific time. When a schedule triggers, the worker automatically invokes the slideshow generation engine using saved hooks and styles, and subsequently queues a TikTok post job. Build a dashboard view in Next.js allowing users to create, pause, unpause, and delete automations with custom cron expressions and target TikTok accounts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06TikTok Direct Publishing & Draft Posting

   Integrate TikTok Content Posting API endpoints to push rendered slideshows and videos directly to connected accounts.

   Implement the TikTok publishing service that interacts with TikTok's Content Posting API (`https://open.tiktokapis.com/v2/post/publish/video/init/` or image carousel endpoints depending on API tier). Support both `DIRECT_POST` and `MEDIA_UPLOAD` (draft mode) settings based on automation configuration. Handle token refresh logic automatically if an access token has expired before posting. Include robust error handling for API rate limits (such as 24-hour post caps), logging failure states to the database and exposing analytics tracking views, likes, shares, and comments fetched from TikTok integration endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ReelFarm