How to vibe codeMetricool

Prerequisites

• Node.jsfree

  Runtime for running the Next.js full-stack framework and build scripts.

• GitHubfree

  Source control and automated deployment pipelines.

• Supabase Accountfree

  Provides hosted PostgreSQL database, vector storage, and edge functions.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex full-stack web applications and managing multi-file refactors.

• Cursor

  AI-native code editor ideal for precise frontend tuning of calendars, charts, and dashboard layouts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js app with Tailwind CSS, configure better-auth with Supabase PostgreSQL, and set up core tables for brands, scheduled posts, analytics metrics, and smartlinks.

   Scrape or initialize a Next.js 16 project with Tailwind CSS, TypeScript, and shadcn/ui components. Configure better-auth with email/password authentication connected to a Supabase PostgreSQL database. Create database migrations and Prisma/Drizzle schema files for: users, brands (name, avatar, timezone), social_accounts (platform, access_token, refresh_token, token_expires_at), scheduled_posts (brand_id, content, media_urls, platforms[], scheduled_for, status), analytics_metrics (brand_id, platform, follower_count, impressions, engagement_rate, recorded_at), and smartlinks (brand_id, slug, blocks_json). Implement strict foreign key constraints and indexes on date and brand fields. Provide clean directory structure and verify the build runs error-free.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Drag-and-Drop Content Calendar

   Build an interactive calendar view allowing users to schedule, drag, and preview content across multiple simulated social channels.

   Build a comprehensive social media planner calendar view using React components (e.g., FullCalendar or custom grid). Support month, week, and day views where scheduled posts appear as draggable event cards color-coded by social platform (Instagram, TikTok, YouTube, LinkedIn, X). Implement a modal for creating and editing posts supporting multi-platform text variations, media upload previews, and scheduling date/time pickers. Wire up Server Actions to update scheduled_posts timestamps in Supabase when drag-and-drop reordering occurs. Include acceptance criteria verifying local timezones are correctly handled.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Content Assistant Integration

   Integrate the Vercel AI SDK and Anthropic API to generate social post copy, hashtags, and alternative text directly within the scheduler modal.

   Integrate the Vercel AI SDK and Anthropic API (Claude 3.5 Sonnet) into the post creation workflow. Build an AI assistant sidebar panel that takes user prompts, target platform selection (e.g., short form for X, professional for LinkedIn, visual caption for Instagram), and tone settings to generate optimized post variations and hashtag recommendations. Implement streaming responses in the UI with a 'Use this copy' button that instantly populates the scheduler text area. Handle API rate errors gracefully and ensure token usage is tracked.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Background Job Queue & Publishing Pipeline

   Set up Inngest durable background jobs to poll and execute scheduled post publishing across mock or configured social APIs.

   Set up Inngest in the Next.js application to handle asynchronous publishing and data syncing workflows. Create a durable background job cron trigger that runs every minute, queries scheduled_posts where status = 'scheduled' and scheduled_for <= NOW(), and dispatches publishing tasks. For each platform (Meta, LinkedIn, X), write modular adapter functions that attempt to post via official APIs or fallback to simulated mock logging if API credentials are absent. Update post status to 'published' or 'failed' with error message logging. Add robust retry logic with exponential backoff for rate-limited network requests.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Analytics Dashboard & Historical Metrics

   Build unified analytics charts tracking follower growth, impressions, and engagement rates over customizable time ranges.

   Build a robust Analytics dashboard page featuring interactive charts (using Recharts or Chart.js) for follower growth, total impressions, reach, and engagement rates across connected brand profiles. Create API endpoints and server components that aggregate metrics from the analytics_metrics table grouped by day, week, and month. Include date range filters (30 days, 90 days, custom) and brand selectors. Implement a background ingestion worker script that fetches profile snapshots from connected social APIs daily and stores time-series records.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Unified Social Inbox & Smartlinks Landing Page

   Implement a centralized comment/message inbox view and a customizable link-in-bio page builder with real-time click tracking.

   Build two auxiliary features: 1) A unified inbox page displaying simulated or ingested comments and direct messages from connected social networks in a split-pane thread interface, allowing reply submissions. 2) A Smartlinks link-in-bio builder where users can create custom landing pages via a slug (e.g., /lk/brandname), adding button links, header images, and social icons, with click analytics tracking stored in Supabase. Ensure both pages are fully responsive and styled with Tailwind CSS and shadcn/ui primitives.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Metricool