How to vibe codeShortcut
Project Management for Software Teams and their Agents
shortcut.com ↗Project Management
The verdict: can you vibe code Shortcut?
Build a focused personal issue tracker with Kanban boards and basic sprint planning, but keep paying for enterprise roadmaps and robust VCS webhooks.
Building a personal agile tracker is a great exercise, but replicating Shortcut's exact real-time drag-and-drop state machine, complex hierarchy (Epics, Stories, Tasks, Objectives), and seamless bi-directional GitHub webhooks requires sustained engineering effort. While AI coding tools can scaffold the database schema and React UI quickly, handling race conditions during multi-user column updates and constructing the complex relational dashboard queries will consume several weeks of debugging.
Estimated effort: 3-4 weeks part-time
What you can't replicate
- An active community of thousands of software teams
- Mature, zero-friction enterprise integrations with dozens of third-party dev tools
Founded
2014
Raised
$40.8M
Team
70-80
Cheapest paid tier
$0
What Shortcut does
A collaborative project management and issue-tracking platform combining Kanban boards, sprints, roadmaps, objectives, and AI agent coordination.
Core features
- Kanban boards with drag-and-drop workflow states
- Epics, Stories, and Tasks relational hierarchy
- Time-boxed Sprints and Iterations tracking
- Roadmaps timeline visualization
- Objectives and Key Results (OKRs) hierarchy
- Real-time collaborative Docs editing
- AI agent coordination workspace for coding assistants
- GitHub/GitLab webhook synchronization
The business
Pricing
- Free Plan$0
- Team Plan$8.50/mo
- Business Plan$12/mo
Funding
$40.8M from Battery Ventures, Greylock Partners, Lerer Hippeau, Resolute Ventures, RRE Ventures, BoxGroup
Pay vs build, cumulative
Break-even at month 2 — after that, every month is money kept.
The hard parts of vibe coding Shortcut
- Real-time state synchronization for multi-column drag-and-drop boards across sessions
- Complex relational graph queries (Organizations -> Teams -> Objectives -> Epics -> Stories -> Tasks)
- Bi-directional webhook queue processing and rate-limiting for GitHub/VCS events
- Real-time collaborative rich-text editor with conflict resolution
How to vibecode Shortcut
Prerequisites
Node.jsfree
Required runtime for running Next.js and TypeScript tools.
GitHubfree
Code repository host and provider for OAuth authentication and webhooks.
AI coding tools
Recommended stack
| Frontend | Next.js with Tailwind CSS and shadcn/ui |
|---|---|
| Backend | Next.js App Router API Routes |
| Database | Neon (Serverless Postgres) |
| Auth | better-auth |
| Payments | None |
| Other | Vercel AI SDK for AI feature wrappers, Liveblocks for real-time document collaboration |
Build guide
01Project Scaffolding and Relational Database Schema
Initialize the Next.js project with Tailwind CSS, configure Drizzle ORM with Neon Postgres, and define the complete core entity schema.
Create a new Next.js project using TypeScript and Tailwind CSS. Configure Drizzle ORM to connect to Neon Postgres. Build out the complete relational database schema for a project management tool: Organizations, Workspaces, Teams, Objectives, Epics, Stories (with workflow state, story points, assignee, and iteration ID), Tasks, and Docs. Include proper foreign key constraints, indexes on workflow states and team IDs, and migration scripts. Ensure clean separation of schema definitions and validation using Zod.02Authentication and Workspace Management
Implement authentication using better-auth and build workspace creation and team switching flows.
Integrate better-auth into the Next.js app to support email/password and GitHub OAuth sign-in. Create user profile tables and map users to Organizations and Workspaces. Build a workspace switcher layout component in React that lets users create new workspaces, invite team members, and manage role permissions (Admin, Member). Add middleware to protect dashboard routes and inject the active workspace context into all API requests.03Kanban Board and Story Lifecycle
Build the interactive Kanban board view with drag-and-drop workflow state transitions and story creation dialogs.
Build an interactive Kanban board component using Tailwind CSS and a drag-and-drop library (or HTML5 drag-and-drop API) representing workflow states (Backlog, To Do, In Progress, Code Review, Done). Implement optimistic UI updates when moving stories between columns, saving the state change immediately via server actions. Create a comprehensive Story detail modal supporting descriptions, story points, task checklists, and label assignment.04Roadmaps and Iteration (Sprint) Planning
Implement time-boxed iterations and Epic roadmap timeline views to structure upcoming work.
Develop an Iterations (Sprints) management module allowing users to create time-boxed start and end dates, assign stories to active sprints, and view velocity metrics. Create a Timeline/Roadmap view that maps Epics across chronological blocks, displaying completion percentages and health indicators (on track, at risk) based on associated story states.05Real-time Docs and AI Agent Integration
Integrate Liveblocks for real-time collaborative documentation and add an AI assistant panel using the Vercel AI SDK.
Integrate Liveblocks into the application to power real-time collaborative Docs editing with presence indicators and cursor tracking. Add a side drawer panel powered by the Vercel AI SDK and Anthropic API that allows users to query workspace context, summarize story backlogs, and generate subtasks from high-level idea prompts.
Cost vs paying for Shortcut
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- Domain name (optional)$12.00 one-time
Total~$12.00 one-time
Ongoing costs (monthly)
- Vercel Hobby Hosting$0.00
- Neon Serverless Postgres$0.00
- Anthropic API for AI features~$5.00/mo
Total~$5.00/mo
Paying for Shortcut
$12.00 / user / mo (Business Plan)
Your time to build
40-60 hours
AI tool credits
$20.00 (Claude Pro)
Break-even
1 month of personal use
Vibe code Shortcut: FAQ
- Can you vibe code Shortcut yourself?
- Solid side project — 68/100 vibecodeable. Build a focused personal issue tracker with Kanban boards and basic sprint planning, but keep paying for enterprise roadmaps and robust VCS webhooks.
- How long does it take to vibe code Shortcut?
- 3-4 weeks part-time — roughly 40-60 hours of hands-on time with an AI coding agent.
- How do you build your own Shortcut?
- Scoped to personal use: Next.js with Tailwind CSS and shadcn/ui on the front, Next.js App Router API Routes behind it, Neon (Serverless Postgres) for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Shortcut without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 3-4 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Shortcut instead of paying?
- About ~$12.00 one-time to start and ~$5.00/mo to run, versus $12.00 / user / mo (Business Plan) for Shortcut. Break-even: 1 month of personal use.
- What stack should you use to vibe code Shortcut?
- Next.js with Tailwind CSS and shadcn/ui; Next.js App Router API Routes; Neon (Serverless Postgres); plus Vercel AI SDK for AI feature wrappers, Liveblocks for real-time document collaboration.