# How to Vibe Code Your Own AuthoredUp (and Stop Paying for It) > All-in-one LinkedIn content creation, scheduling, and analytics tool - Site: https://authoredup.com - Category: Marketing & Content - Verdict: **Serious undertaking** (42/100 vibecodeable) - Estimated effort: 4-6 weeks of focused building and extension debugging ## Verdict Build a web-only clone of the dashboard and editor for personal use, but keep paying if you rely on the production-grade browser extension inside LinkedIn. Replicating the companion web app (drafts, calendar, analytics dashboard) with Next.js and Supabase is a rewarding side project. However, building and maintaining the Chromium browser extension that injects formatting and previews directly into LinkedIn's volatile DOM is a continuous maintenance trap. Every time LinkedIn tweaks its frontend code, your extension breaks. If you just want a clean place to write and schedule posts, building a standalone web app clone is feasible; mirroring the seamless in-feed extension experience requires significant ongoing reverse-engineering effort. ### What you can't replicate - The exact browser extension stability against frequent LinkedIn DOM updates without breaking weekly - The 2,000+ customer base and organic word-of-mouth trust of top creators - Zero-maintenance guarantee against LinkedIn anti-bot detection shifts ## What it does AuthoredUp is a hybrid Chromium browser extension and web application built to help creators, founders, and teams write, format, preview, schedule, and analyze content on LinkedIn without violating platform anti-bot rules. ### Core features - Chromium browser extension injecting rich-text editor and preview tools into LinkedIn DOM - Companion web dashboard for content calendar, drafts management, and snippets - Historical analytics aggregation (impressions, engagement rates, saves, shares) - Best-time-to-post heatmap generated from user activity history - Saved posts manager with search, filters, and CSV export - Draft collaboration and secure review link generation ## The business ### Pricing - Individual Plan: $19.95/mo — For solo creators, consultants, and founders managing one profile. - Business Plan: $14.95/profile/mo — For teams and agencies managing multiple accounts (min 3 profiles). Founded 2022. Team size: 3 to 5. ## The hard parts - Constant maintenance of browser extension DOM selectors and mutation observers to survive LinkedIn layout updates - Scraping historical analytics and saved posts securely via client-side injection without triggering rate limits or account bans - Cross-platform state synchronization between the browser extension and web dashboard - Aggregating and computing medians, growth trends, and personalized posting heatmaps ## How to vibe code AuthoredUp ### Prerequisites - Node.js (free): Runtime environment for building the web dashboard and extension scripts. - GitHub (free): Source code repository and version control for the extension and web app. - Google Chrome (free): Required for loading and testing unpacked Chromium browser extension builds. ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding full-stack web apps and debugging complex extension scripts in the terminal. - Cursor: Ideal for iterative UI work on the dashboard and fine-tuning Tailwind layout components. ### Stack - Frontend: Next.js with Tailwind CSS and TypeScript - Backend: Next.js API Routes / Server Actions - Database: Supabase (PostgreSQL) - Auth: better-auth - Payments: None (personal use clone) - Other: Plasmo or vanilla Manifest V3 for the browser extension, PostHog for product analytics ### Hosting - Vercel (Hosting the Next.js companion web application and dashboard): $0/mo - Supabase (PostgreSQL database storing user drafts, snippets, and analytics history): $0/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js application with TypeScript and Tailwind CSS, configure Supabase for database storage, and set up better-auth for personal authentication. ``` Scaffold a new Next.js 16 project with TypeScript and Tailwind CSS v4. Set up a Supabase client connection using environment variables for DATABASE_URL. Implement better-auth with email/password authentication and create database migrations for tables: 'users', 'drafts' (id, user_id, content, status, tags, created_at, updated_at), 'snippets' (id, user_id, title, content), and 'posts_history' (id, user_id, linkedin_post_id, metrics jsonb, published_at). Ensure strict TypeScript types and modular organization under an 'app/' directory layout. ``` 2. **Rich-Text Editor & Multi-Device Preview** — Build the core writing interface featuring bold, italic, bullet lists, character counting, readability grading, and desktop/mobile light/dark mode previews. ``` Build a rich-text editor component in Next.js that supports inserting custom Unicode bold, italic, bullet points, and numbered lists. Add a live character counter and a readability grade calculator (aiming for grade 8 or lower). Implement a split-pane preview sidebar showing exact LinkedIn feed mockups for desktop and mobile in both light and dark modes, including the 'See more' fold truncation calculation. ``` 3. **Drafts & Snippets Management** — Create the centralized repository for saving work-in-progress posts, organizing them with tags, and managing reusable text snippets and hooks. ``` Create a dashboard view for managing drafts and snippets. Implement CRUD operations for drafts with status stages ('Active', 'Ready', 'Submitted') and keyword tagging. Add a sidebar drawer for reusable text snippets and an integrated library of 50+ common opening hooks and call-to-action (CTA) templates that can be inserted into the editor with a single click. ``` 4. **Content Calendar & Scheduling UI** — Develop a visual calendar interface to plan, schedule, and view published and queued content across profiles and company pages. ``` Build a visual content calendar component using FullCalendar or custom CSS grid matching a monthly and weekly view. Allow users to drag and drop drafts onto specific days, assign them to personal profiles or company pages, and set posting reminders. Save scheduled dates in the database and display a status badge on each calendar event item. ``` 5. **Analytics Dashboard & Heatmaps** — Implement performance analytics views, follower growth timelines, engagement metric summaries, and best-time-to-post heatmaps. ``` Build an analytics dashboard page with charts (using Recharts) tracking profile follower growth over time, impressions, reactions, comments, and saves. Implement a comparison view for period-over-period performance (this period vs last period). Construct a 'best time to post' 7x24 heatmap grid based on aggregated historical post engagement data, and add a button to export all analytics data to CSV. ``` 6. **Chromium Browser Extension Scaffolding** — Create a Manifest V3 browser extension that injects the editor toolbar and preview buttons directly into the LinkedIn web feed DOM. ``` Create a Chrome extension using Manifest V3 with a content script designed to run on linkedin.com/feed/*. Implement MutationObservers that detect when the LinkedIn post creation modal opens, and inject a floating toolbar button to open the AuthoredUp formatting editor overlay. Ensure robust error handling for DOM changes and clean shadow DOM styling to prevent CSS collisions with LinkedIn's stylesheet. ``` 7. **Extension-to-Dashboard Sync & Polish** — Wire up extension background scripts to sync drafts and saved posts securely with the Next.js backend API without violating security policies. ``` Implement background service worker logic in the Chrome extension to authenticate against the Next.js backend using stored session tokens. Enable syncing of drafts and quick-saving of bookmarked LinkedIn posts directly from the extension feed interface into the user's personal database library. Add end-to-end error logging and polish UI states for loading and offline caching. ``` ### Cost vs paying **Starting costs (one-time):** - Claude Pro AI Coding Credits: $20.00 - Total: ~$20 one-time **Ongoing costs (monthly):** - Vercel & Supabase Free Tiers: $0.00 - Total: $0/mo - Paying for the SaaS instead: $19.95/mo - Build time: 45-60 hours - AI tool credits: $20 one-time (Claude Pro) - Break-even: 1 month of paid SaaS subscription ## Sources - [AuthoredUp Official Website](https://authoredup.com) - [AuthoredUp Pricing & Features Guide](https://authoredup.com/blog/authoredup-pricing-plans)