# How to Vibe Code Your Own Shortcut (and Stop Paying for It) > Project Management for Software Teams and their Agents - Site: https://shortcut.com - Category: Project Management - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 3-4 weeks part-time ## Verdict 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. ### 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 ## What it 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 — Best for teams getting started - Team Plan: $8.50/mo — Best for small teams - Business Plan: $12/mo — Best for fast-growing teams ### Funding $40.8M raised. - Seed Round (2014-2015) - Series A (December 2017 - $10M) - Series B (January 2020 - $25M) Investors: Battery Ventures, Greylock Partners, Lerer Hippeau, Resolute Ventures, RRE Ventures, BoxGroup Founded 2014. Team size: 70-80. ## The hard parts - 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 vibe code Shortcut ### Prerequisites - Node.js (free): Required runtime for running Next.js and TypeScript tools. - GitHub (free): Code repository host and provider for OAuth authentication and webhooks. ### Recommended AI tools - Claude Code: Unmatched ability to scaffold multi-file full-stack features, write relational database schemas, and debug complex frontend state. - Cursor: Ideal for fine-tuning React Kanban components, Tailwind styles, and reviewing real-time drag-and-drop diffs. ### 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 ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints): $0-20/mo - Neon (Serverless Postgres database storing workspaces, epics, stories, and tasks): $0/mo ### Build guide 1. **Project 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. ``` 2. **Authentication 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. ``` 3. **Kanban 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. ``` 4. **Roadmaps 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. ``` 5. **Real-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 **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 the SaaS instead: $12.00 / user / mo (Business Plan) - Build time: 40-60 hours - AI tool credits: $20.00 (Claude Pro) - Break-even: 1 month of personal use ## Sources - [Shortcut Official Website](https://shortcut.com) - [Wikipedia - Shortcut Software](https://en.wikipedia.org/wiki/Shortcut_Software) - [GetLatka - Shortcut Software Company Profile](https://getlatka.com)