How to vibe codeSeobility

Prerequisites

• Node.jsfree

  Runtime environment for TypeScript, Next.js, and backend scraping scripts.

• GitHubfree

  Code repository and deployment hook for hosting providers.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex backend crawl loops and React components.

• Cursor

  Ideal IDE fork for fine-tuning UI dashboards, charts, and audit table components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Neon Serverless Postgres via Drizzle ORM, and set up better-auth.

   Create a new Next.js project with TypeScript and Tailwind CSS. Set up Drizzle ORM connected to Neon Postgres with the following tables: 'projects' (id, user_id, url, created_at), 'audits' (id, project_id, status, issues_json, score, created_at), 'rankings' (id, project_id, keyword, rank, search_engine, tracked_date), and 'backlinks' (id, project_id, source_url, target_url, anchor_text, link_status, domain_authority). Implement better-auth for user authentication with email and password. Ensure all database migration files and client utilities are fully typed and structured.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Website Audit & Crawler Engine

   Build a recursive web crawler using Cheerio and Playwright to analyze pages for metadata, broken links, and SEO factors.

   Build a robust web crawler module in TypeScript using Cheerio for static HTML parsing and Playwright for JavaScript rendering fallback. The crawler must ingest a target URL, respect robots.txt rules, discover internal links recursively up to a configurable page limit (e.g., 1,000 pages), and evaluate 300+ parameters: missing title tags, missing meta descriptions, H1 presence, broken internal/external HTTP links, image alt attributes, and response load times. Store the raw audit results and aggregated checklist issues as a JSON payload in the 'audits' table linked to the project ID. Provide a server action or API route to trigger crawls asynchronously.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Ranking Monitoring & SERP Scraper

   Implement keyword tracking and SERP position lookup logic.

   Create a ranking monitoring service that takes a list of keywords associated with a project and checks their current Google search ranking positions. Implement a modular fetcher using proxy rotation support to query search results, extract matching domain listings, and record daily positions into the 'rankings' table. Build a background cron job using Trigger.dev to automate daily rank checks across configured projects. Include error handling for CAPTCHAs and temporary rate limits with exponential backoff.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Backlink & Competitor Analysis Modules

   Build tracking interfaces and mock/live ingestion for backlink profiles and competitor benchmark comparisons.

   Develop a backlink monitoring and competitor analysis backend service. Create database structures and API endpoints to log incoming backlink profiles, track new or lost links, and compute basic link quality metrics. Build a competitor analysis module that allows users to input up to 5 competitor domains per project, fetching their ranking overlap and keyword gaps using public search endpoints or cached SERP data. Expose these metrics via structured API routes for frontend dashboards.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05TF*IDF Content Optimization Tool

   Implement a text analysis engine that computes term frequencies and content relevance gaps against competing top pages.

   Build a TF*IDF content optimization tool module. The backend should accept a target keyword and target page content, fetch top 10 ranking competitor pages for that keyword, extract and tokenize their body text, calculate Term Frequency-Inverse Document Frequency (TF*IDF) weights across terms, and compare them against the user's draft content. Return a semantic gap analysis list highlighting underused or overused terms, keyword density scores, and content structure recommendations. Create an accompanying React text editor view showing real-time term suggestions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Uptime Monitoring & Alerting

   Set up a 24/7 cron-based server availability checker with Resend email alerts.

   Implement an uptime monitoring worker that runs every 5 minutes across all project URLs using cron triggers. The worker must perform HTTP HEAD/GET requests, measure response latency, check for 2xx/3xx status codes, and record downtime incidents in a new 'uptime_logs' table. Integrate the Resend API to send immediate email notifications to the project owner when a website goes down or recovers. Build an uptime status dashboard component showing 24-hour availability graphs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Dashboard UI & White-Label Reporting

   Assemble the cohesive dashboard interface with Recharts analytics and PDF export capabilities.

   Build a comprehensive Next.js frontend dashboard with Tailwind CSS mimicking professional SEO platforms. Create views for: 1) Overview summary with audit health score rings, 2) Website Audit prioritized to-do list table with issue filters, 3) Ranking Monitoring line charts using Recharts showing position trends over time, 4) Backlink profile list, and 5) TF*IDF content editor. Implement a client-side PDF export utility (using jsPDF or html2pdf) that generates a clean, white-labeled audit report featuring custom branding headers for agency use.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Seobility