How to vibe codeBuffer

Prerequisites

• Node.jsfree

  Runtime environment for Next.js full-stack framework and background worker scripts.

• GitHubfree

  Source code repository and CI/CD triggers for Vercel and Railway deployments.

• Supabase Accountfree

  Managed PostgreSQL database for storing users, scheduled posts, queues, and tokens.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex database models, API connectors, and background job workers across multiple files.

• Cursor

  Ideal AI-native editor for refining the drag-and-drop calendar UI and dashboard components.

Build guide

1. 01Scaffold Project, Database Schema, and Auth

   Initialize a Next.js project with Tailwind CSS, configure shadcn/ui components, set up Supabase PostgreSQL with tables for users, connected_channels (storing encrypted OAuth tokens), posts, and ideas, and integrate better-auth.

   Create a new Next.js 16 app with TypeScript and Tailwind CSS. Configure Supabase as the PostgreSQL database provider and set up better-auth for email/password and Google OAuth authentication. Write Prisma or Drizzle schema models for users, connected_channels (id, user_id, platform, account_name, access_token, refresh_token, token_expires_at), posts (id, channel_id, content, media_urls, scheduled_for, status [draft, queued, publishing, published, failed], error_message), and content_ideas (id, user_id, title, notes, created_at). Implement secure encryption for stored OAuth tokens at rest.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Social Account OAuth Integration Framework

   Build modular OAuth connectors for major social APIs (X, LinkedIn, Meta/Instagram) to handle authorization handshakes, token exchanges, and secure credential storage.

   Build modular API connector utilities in TypeScript for X (Twitter) OAuth 2.0, LinkedIn Share API, and Meta Graph API (Facebook/Instagram). Create API routes in Next.js for initiating OAuth flows (/api/auth/connect/[platform]) and handling callback redirections (/api/auth/callback/[platform]) that securely store encrypted access and refresh tokens into the connected_channels table. Handle token refresh mechanics when calling platform endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement Asynchronous Post Queue and Scheduler

   Set up Upstash Redis and BullMQ on Railway to manage scheduled post execution, automatic retries, and rate limit compliance.

   Set up a robust background job processing system using BullMQ backed by Upstash Redis. Create a scheduler worker that runs every minute, checks the posts table for items where scheduled_for <= NOW() and status = 'queued', and dispatches them to the correct platform API adapter based on the channel platform. Implement robust error handling, automatic exponential backoff retries for transient network failures, and update post status to 'published' or 'failed' with detailed error logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Build Visual Content Calendar & Post Composer UI

   Create an interactive dashboard with a drag-and-drop calendar view, multi-channel composer, and media attachment options.

   Build a polished dashboard UI in Next.js featuring a visual content calendar view (weekly and monthly grid) using FullCalendar or custom grid components. Create a rich post composer modal allowing users to select multiple connected channels, draft text, attach media URLs, preview platform-specific character limits, schedule custom timestamps, or choose 'Add to Queue'. Implement drag-and-drop rescheduling that updates scheduled_for timestamps in Supabase.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add Content Ideas Board and AI Assistant

   Implement a kanban-style idea repository and integrate the OpenAI API for AI-assisted post rewriting and brainstorming.

   Build a Kanban-style 'Create' board view for managing content ideas with columns like Ideas, In Progress, and Ready. Implement an AI Assistant feature using the OpenAI API where users can input raw text or bullet points and request actions like 'Rewrite for LinkedIn', 'Make punchy for X', or 'Generate thread'. Connect generated outputs directly into the post composer modal.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Build Analytics Insights and Start Page Link-in-Bio

   Create analytics overview screens aggregating post performance metrics and a public link-in-bio landing page builder.

   Build an Insights analytics dashboard page that queries published posts and displays aggregate metrics (total posts, follower growth trends, engagement rates) using charting libraries like Recharts. Additionally, build a Start Page builder feature allowing users to configure a custom public link-in-bio landing page (slug, profile bio, customizable link buttons) hosted at /[username], rendering dynamically from Supabase.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Buffer