# How to Vibecode Linear — Can You Do It Yourself? > The system for modern product development - Site: https://linear.app - Category: Project Management & Issue Tracking - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 3-4 weeks of focused development and debugging ## Verdict Build a focused personal clone of Linear to master keyboard-driven web interfaces, but expect to compromise on the zero-latency offline sync engine. Replicating Linear for personal use is a rewarding test of frontend architecture, but you will hit massive engineering walls trying to match its native-grade feel. While an AI agent can quickly scaffold the Next.js routes, PostgreSQL tables, and basic issue CRUD forms, you will struggle with the offline-first sync engine, complex Cmd+K keyboard focus management, and real-time conflict resolution. The real product relies on years of bespoke state-machine engineering that cannot be prompted into existence in a weekend. ### What you can't replicate - Zero-latency optimistic local sync engine handling concurrent offline writes - Instantaneous CJK-compatible command menu and custom layout rendering - The massive library of native enterprise integrations (GitHub, Slack, Zendesk, Figma) - Years of micro-interaction polish and CSS tuning for sub-16ms frame rendering ## What it does Linear is a purpose-built issue-tracking and product development platform designed for modern software teams, combining high-performance local-first workflows, strategic roadmaps, cycles, and deep AI agent integrations. ### Core features - Instantaneous local-first UI state with optimistic updates - Global command menu (Cmd+K) and keyboard-first navigation (J/K) - Issue tracking, filtering, priorities, states, and labels - Cycle planning and roadmapping views - Triage workflow for incoming requests - Rich-text markdown editor with comments and mentions - Real-time WebSocket collaboration and workspace sync - Basic LLM agent integration for issue summarization and routing ## The business ### Pricing - Free: $0 — Free for everyone - Basic: $10/mo — Billed yearly - Business: $16/mo — Billed yearly - Enterprise: Custom — Annual billing only ### Funding $134.2M raised. - Seed Round (November 2019): $4.2M - Series A (December 2020): $13M - Series B (September 2023): $35M - Series C (June 2025): $82M at $1.25B valuation Investors: Accel, Sequoia Capital, 01 Advisors, Seven Seven Six, Designer Fund, Patrick Collison, Dylan Field, Guillermo Rauch Founded 2019. Team size: 100-180. ## The hard parts - Building a custom offline-first sync engine with optimistic concurrency control - Achieving sub-16ms layout responsiveness and native app fluidity in a web browser - Complex global keyboard event routing without dead zones or CJK IME input lag - Real-time multi-user conflict resolution across shared document and issue trees - Streaming LLM tool calls and structural code diff viewers ## How to vibecode Linear ### Prerequisites - Node.js (free): Runtime environment for building and running the Next.js application stack. - GitHub (free): Version control repository hosting and deployment hook integration. ### Recommended AI tools - Claude Code: Primary AI coding agent for scaffolding full-stack features, database schemas, and API routers directly from your terminal. - Cursor: AI-native code editor for reviewing multi-file changes and fine-tuning complex UI components. ### Stack - Frontend: Next.js with Tailwind CSS and Zustand for client state - Backend: Next.js API routes / Server Actions - Database: Supabase PostgreSQL with Row Level Security - Auth: Supabase Auth (Email / Google OAuth) - Payments: None (Personal use clone) - Other: Drizzle ORM for database schema definitions, Zod for runtime validation, Cmdk library for command menu handling ### Hosting - Vercel (Hosting the Next.js frontend and serverless API functions): $0/mo - Supabase (Managed PostgreSQL database, realtime subscriptions, and authentication): $0/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize a Next.js project with Tailwind CSS, configure Drizzle ORM connected to Supabase PostgreSQL, and set up core tables for workspaces, teams, users, issues, projects, and cycles. ``` Scaffold a new Next.js app with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM configured for Supabase PostgreSQL. Create a robust database schema with tables for users, workspaces, team_memberships, teams, issues (with fields for title, description, status, priority, estimate, team_id, creator_id, assignee_id), projects, and cycles. Include foreign key constraints, indexes on frequently filtered foreign keys, and default UUID primary keys. Ensure migrations run cleanly and add a seed script to populate mock workspace data with sample issues. ``` 2. **Authentication and Workspace Setup** — Implement Supabase Auth with email magic links and Google OAuth, alongside a workspace creation and team invitation flow. ``` Implement authentication using Supabase Auth in Next.js, supporting Google OAuth and email magic links. Create a middleware to protect workspace routes and handle session cookies securely. Build an onboarding page where authenticated users without a workspace can create a new organization, assign a team slug, and invite mock team members. Store user profile records synchronized with Supabase auth.users via database triggers. ``` 3. **Issue Tracking Table & Keyboard Navigation** — Build the main issue list view featuring custom status badges, priority icons, inline editing, and Vim-style J/K keyboard navigation. ``` Build the primary issue tracking table view in Next.js mimicking Linear's layout. Include columns for issue identifier, title, status icon, priority icon, assignee avatar, and due date. Implement global keyboard shortcuts using a custom hook: 'j' and 'k' to move selection down and up the list, 'e' to edit, 'c' to open the issue creator modal, and arrow keys for navigation. Add optimistic UI updates when changing issue statuses or priorities directly from the list view. ``` 4. **Command Menu (Cmd+K) and Quick Actions** — Implement a global command menu (`Cmd+K` / `Ctrl+K`) powered by `cmdk` to allow fast navigation, issue creation, and theme toggling. ``` Implement a global command menu modal triggered by Cmd+K or Ctrl+K using the 'cmdk' library. The menu must support fuzzy searching across views (Issues, Roadmap, Settings), executing quick actions like 'Create new issue', 'Change theme', and navigating directly to specific teams or projects. Ensure the input handles IME composition cleanly without dropping keystrokes, and trap focus correctly inside the modal when open. ``` 5. **Cycle Planning and Roadmap Views** — Build cycle management screens and timeline roadmaps to organize issues into scheduled sprints and strategic initiatives. ``` Create a Cycle Planning view where users can view active, upcoming, and completed cycles for a team. Allow dragging or assigning issues into active cycles with capacity meters tracking total points. Additionally, build a basic timeline roadmap view grouping projects by month or quarter. Use Tailwind grid layouts to display project bars horizontally across a date axis, supporting click-to-edit project details. ``` 6. **Triage Workflow and AI Summarization** — Build an incoming Triage view and integrate an LLM endpoint to automatically suggest team routing and summarize issues. ``` Build a dedicated Triage view for unassigned or newly reported issues. Integrate an AI assistant endpoint using the Vercel AI SDK and Anthropic API that reads incoming issue descriptions and automatically suggests appropriate priorities, labels, and team routing. Provide 'Accept' and 'Dismiss' buttons that apply the AI suggestions instantly with smooth animation transitions. ``` 7. **Polish, Realtime Sync, and Deployment** — Add Supabase Realtime subscriptions for live multi-user issue updates, refine micro-interactions, and deploy to Vercel. ``` Configure Supabase Realtime postgres changes subscriptions in the frontend application so that issue creation, status updates, and comments sync instantly across multiple browser tabs without requiring manual page refreshes. Refine UI transitions, tooltips, and loading skeletons to eliminate layout shift. Prepare environment variable configurations for production deployment on Vercel and verify clean build output. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain (optional): $12/year - Total: ~$12 one-time **Ongoing costs (monthly):** - Supabase Database & Auth: $0/mo (Free tier) - Vercel Hosting: $0/mo (Hobby tier) - Total: $0/mo - Paying for the SaaS instead: $16/user/mo - Build time: 40-60 hours - AI tool credits: $20/mo (Claude Pro or Cursor) - Break-even: N/A (Personal build for learning) ## Sources - [Linear Official Website & Pricing](https://linear.app) - [Linear Changelog - MCP & Triage Intelligence](https://linear.app/changelog)