Linear

Prerequisites

• Node.jsfree

  Required for running Next.js frontend and TypeScript build tools

• GitHub Accountfree

  For code hosting and setting up webhook integrations

• Supabase Accountfree

  Instant managed PostgreSQL database and authentication provider

AI coding tools

• Claude Code

  Best-in-class agentic CLI coder for scaffolding multi-file apps and debugging complex state logic

• Cursor

  Ideal AI code editor for fine-tuning UI components, animations, and Tailwind styling

Build guide

1. 01Project Scaffolding & Design System

   Initialize the Next.js project with TypeScript, Tailwind CSS, and Lucide icons, establishing the dark-mode aesthetic and layout shell.

   Initialize a new Next.js 14+ application with App Router, TypeScript, and Tailwind CSS. Configure a gorgeous dark-mode-first aesthetic inspired by Linear: deep charcoal backgrounds (#0f1117), crisp white text, subtle borders (#222632), and clean rounded corners. Install lucide-react for icons, cmkd for command menus, and framer-motion for smooth micro-interactions. Create a responsive layout with a collapsible sidebar (Inbox, My Issues, Projects, Cycles, Triage) and a main content viewport. Ensure all core fonts and typography mirror a professional developer tool.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Database Schema & Supabase Auth

   Set up PostgreSQL tables for teams, issues, projects, and cycles with Supabase authentication.

   Set up Supabase authentication and define the core relational schema in PostgreSQL. Create tables for users, teams, projects, cycles, and issues. Issues should include fields for title, description, status (backlog, todo, in_progress, done), priority (urgent, high, medium, low, none), team_id, project_id, cycle_id, and assignee_id. Enable Row Level Security (RLS) on all tables so users can only read and write data within their workspace teams. Implement Supabase Auth helpers and create a sleek sign-in/sign-up screen matching the Linear brand.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Issue Tracker Core UI & Kanban / List Views

   Build the core issue management interface with filtering, sorting, and group-by capabilities.

   Build the main issue views: a high-density list view and a Kanban board grouped by status (Backlog, Todo, In Progress, Done). Implement filtering by assignee, priority, and label, as well as sorting by created date and priority. Add inline issue editing and quick status toggling with optimistic UI updates. Ensure keyboard navigation lets users arrow up and down through issues, hit 'Enter' to open details, and press 'c' to create a new issue anywhere in the app.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Command Menu & Keyboard Shortcuts

   Implement a global command palette (Cmd+K) and keyboard shortcuts for rapid action execution.

   Implement a global command palette using cmdk triggered by Cmd+K or Ctrl+K. The command menu should allow users to quickly search issues, navigate between views (Inbox, Projects, Cycles), change theme, create new issues, and assign team members. Add global keyboard shortcuts: 'c' for new issue, 'g i' for inbox, 'g p' for projects, and '/' to focus the global search bar. Ensure modal focus trapping and smooth open/close animations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Cycles & Project Roadmaps

   Add time-boxed cycles (sprints) and project roadmap tracking views.

   Create a Cycles management module allowing teams to organize work into 2-week time-boxed sprints with start and end dates, progress bars, and scope burn-down metrics. Build a Projects view with visual roadmaps and milestones categorized by status (Planned, Started, Paused, Completed). Connect issues to specific cycles and projects so status changes automatically update project health indicators.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Triage Inbox & GitHub Webhook Integration

   Build the triage queue for incoming items and a webhook receiver to sync GitHub PRs with issues.

   Build a Triage view where incoming issues from integrations or external reporters land before being accepted into the team backlog. Implement actions to Accept, Decline, or Archive triage items in bulk. In addition, create a secure Next.js API route (/api/webhooks/github) to receive GitHub PR events. Parse incoming pull request webhooks and automatically link PR status (open, merged) to corresponding issue identifiers (e.g., 'ENG-123') found in branch names or commit messages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Linear