How to vibe codeSocialBee

Prerequisites

• Node.jsFree

  Runtime for running Next.js and backend TypeScript services

• GitHubFree

  Source code control and CI/CD repository hosting

• 

  OpenAI AccountUsage-based

  API keys for generating captions, hashtags, and AI images via DALL-E

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding multi-file SaaS architectures and fixing backend queue bugs

• Cursor

  Ideal AI editor for fine-tuning complex Tailwind dashboard layouts and calendar components

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application, configure Tailwind CSS, set up better-auth with Neon Postgres, and define database schemas for workspaces, categories, social profiles, and posts.

   Scaffold a new Next.js project with TypeScript, Tailwind CSS, and App Router. Integrate better-auth configured with a Neon Postgres connection using Drizzle ORM. Create database tables for 'workspaces' (id, name, owner_id), 'social_profiles' (id, workspace_id, platform, account_name, access_token), 'content_categories' (id, workspace_id, name, color, schedule_rules), and 'posts' (id, workspace_id, category_id, content, media_url, scheduled_for, status). Ensure strict foreign key constraints and indexes on scheduled_for and workspace_id for efficient calendar querying.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Workspace & Social Account Management

   Build the workspace switching dashboard and the settings interface to connect and manage external social media profile tokens.

   Build a dashboard layout in Next.js featuring a workspace switcher dropdown in the sidebar and a dedicated '/settings/channels' page. Implement a UI component that lists connected social profiles across platforms like X, LinkedIn, and Facebook, with 'Connect Account' buttons that initiate OAuth flows or store simulated access tokens for personal testing. Implement server actions to create, update, and delete workspaces and connected profiles securely with RLS-style tenant isolation checks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Category-Based Content Calendar & Scheduling

   Create the visual content calendar interface and the backend scheduling engine using Inngest for recurring category posting slots.

   Build an interactive content calendar view (Month, Week, List) using React and Tailwind. Create a post creation modal where users can assign posts to specific content categories (e.g., Industry News, Promotional) and set scheduled publication dates. Implement an Inngest background function that triggers every minute, queries the database for posts where status='scheduled' and scheduled_for <= NOW(), and executes mock or live publishing calls to connected social APIs, updating post status to 'published' or 'failed' upon completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Content Generator & Copilot Integration

   Integrate the Vercel AI SDK and OpenAI API to provide text prompt generation for captions, hashtags, and media assets.

   Implement an AI post generator sidebar inside the post editor using the Vercel AI SDK and OpenAI API. Create backend API routes that accept a topic prompt and platform target, returning optimized captions, hashtag sets, and variations. Add an image generation tab that calls DALL-E 3 or Unsplash API to attach scroll-stopping visuals directly to the post draft. Ensure clean error handling, loading states, and a 'Use This' button that populates the active post form.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Unified Social Inbox & Collaboration Workflow

   Build the unified inbox stream for comments and mentions alongside team post approval workflows and internal review notes.

   Build a unified social inbox page at '/inbox' that aggregates comments, mentions, and direct messages from connected social accounts into a kanban or stream view. Implement threaded replies that dispatch outgoing messages back to the platform APIs. Additionally, add a post approval workflow feature: allow team members with 'Collaborator' roles to submit posts for review, leave internal feedback notes under post drafts, and trigger state transitions from 'pending_approval' to 'approved' by workspace admins.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics Dashboard & Polish

   Develop metrics aggregation views for reach, engagement, and category performance, along with PDF export capabilities.

   Build an analytics dashboard at '/analytics' displaying aggregated metrics for post reach, engagement rate, and category distribution using charts (e.g., Recharts). Implement server-side aggregation queries that calculate performance per channel over 3-month and 2-year windows. Add a 'Download PDF Report' button that compiles stats and top-performing posts into a branded export document for client reporting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SocialBee