# How to Vibe Code Your Own Trello (and Stop Paying for It)

> Capture, organize, and tackle your to-dos from anywhere

- Site: https://trello.com
- Category: Productivity & Project Management
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal Kanban board subset with live sync, but keep paying for the enterprise ecosystem and polished Power-Ups.

Creating a personal Kanban app with lists, cards, and drag-and-drop is a satisfying project, but replicating production Trello requires solving tricky realtime synchronization, conflict resolution, and fractional indexing for item ordering. While an AI coding agent handles the CRUD boilerplate and database schema easily, managing WebSockets, optimistic UI updates, and drag-and-drop boundary states will test your debugging patience.

### What you can't replicate

- The massive library of 200+ official third-party Power-Ups and integrations
- Atlassian enterprise compliance, SOC 2 Type 2 certs, and SAML SSO infrastructure
- Native mobile apps across iOS, Android, macOS, and Windows with offline sync

## What it does

Visual project and task management application relying on a Kanban board paradigm with virtual boards, lists, and drag-and-drop cards.

### Core features

- Kanban board CRUD (boards, lists, cards)
- Drag-and-drop card reordering across lists
- Card details (checklists, labels, due dates, comments)
- Realtime collaborative updates for multiple users
- Workspace and member management
- Board templates and quick search

## The business

### Pricing

- Free: $0
- Standard: $5/mo
- Premium: $10/mo
- Enterprise: $17.50/mo

Founded 2011.
Team size: Acquired by Atlassian for $425M in 2017.

## The hard parts

- Realtime collaborative synchronization without race conditions or state drift
- Fractional indexing or linked-list positioning algorithms for smooth card reordering
- Cross-platform parity across web and native clients
- Extensible sandbox or plugin architecture for Power-Ups

## How to vibe code Trello

### Prerequisites

- Node.js (free): Required runtime for Next.js development and package installation
- GitHub (free): Version control and deployment pipeline integration

### Recommended AI tools

- Claude Code: Autonomous multi-file agentic coding for scaffolding the Next.js frontend, database models, and API routes
- Cursor: AI code editor for fine-tuning drag-and-drop interactions, component styles, and realtime socket listeners

### Stack

- Frontend: Next.js with Tailwind CSS and @dnd-kit/core for drag-and-drop boards
- Backend: Next.js API routes with Socket.io or Turso real-time syncing
- Database: Turso (SQLite at the edge) for fast board, list, and card persistence
- Auth: better-auth for self-hosted secure session management without MAU fees
- Payments: none — personal personal-use clone
- Other: Vercel AI SDK for AI card description generation and board auto-creation, Resend for email verification and workspace invites

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints): $0-20/mo
- Turso (Serverless SQLite database storage with edge replication): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema Setup** — Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up the relational schema in Turso for Workspaces, Boards, Lists, and Cards.

```
Scrape together a new Next.js project using App Router and TypeScript. Install Tailwind CSS and set up a robust layout for a SaaS application. Create a database schema using Drizzle ORM connected to Turso with tables for users, workspaces, workspace_members, boards, lists, and cards. Each card must have a fractional position index (string or float), title, description, due date, and labels. Configure better-auth for email/password authentication linked to the Turso database. Ensure all relational constraints and foreign keys are strictly enforced with cascading deletes.
```

2. **Core Kanban Board UI and Drag-and-Drop Implementation** — Build the visual board view with horizontal scrolling lists and drag-and-drop card reordering using @dnd-kit.

```
Build a Kanban board interface in Next.js resembling Trello. Implement a horizontal scrollable view containing collapsible lists, where each list contains draggable cards. Use @dnd-kit/core and @dnd-kit/sortable to enable smooth drag-and-drop reordering of cards both within the same list and across different lists. When a card is dropped, calculate its new fractional index position and execute a server action to update the database state optimistically without causing layout flicker.
```

3. **Card Details Modal and Advanced Attributes** — Implement a slide-over modal for cards supporting descriptions, checklists, due dates, and activity comments.

```
Create a comprehensive card detail modal that opens when clicking any card on the Kanban board. The modal must support editable markdown descriptions, interactive task checklists with item completion toggles, due date pickers, label color tags, and a threaded comment section for team activity logs. Implement optimistic UI updates for checklist items and comments, persisting changes immediately to backend API routes backed by Turso.
```

4. **Realtime Collaboration with WebSockets** — Add real-time synchronization so multiple browser windows reflect board movements, new lists, and card edits instantly.

```
Integrate real-time synchronization into the Kanban board using Socket.io or Supabase/Turso real-time channels. When any user drags a card, edits a title, creates a list, or adds a comment, broadcast the event to all other clients currently viewing that board. Handle incoming websocket payloads cleanly in React state to update the local board view instantly without requiring manual page refreshes, and handle connection dropouts gracefully.
```

5. **AI Board Generation and Card Summarization** — Integrate the Vercel AI SDK and Anthropic API to allow users to generate entire boards from a goal description and auto-summarize card notes.

```
Integrate the Vercel AI SDK using Claude Sonnet to add AI features to the board. Implement a 'Generate Board with AI' modal where typing a project goal automatically creates a complete board structure with relevant lists and prepopulated cards. Add an AI assistant button inside the card detail modal that summarizes long comment threads and fixes grammar in card descriptions. Handle streaming responses securely via server actions.
```

6. **Polish, Workspace Settings, and Deployment** — Add workspace switcher navigation, user management, error handling, and deploy the application to Vercel.

```
Add workspace administration views allowing users to switch between workspaces, invite members by email using Resend transactional emails, and manage board visibility settings. Implement robust error boundaries, toast notifications for failed network actions, loading skeletons for data fetching, and prepare environment variable configurations for deployment on Vercel and Turso.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom Domain (optional): $12.00 one-time
- Total: $12.00 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0.00/mo
- Turso Database: $0.00/mo
- Anthropic API for AI features: ~$3.00/mo usage
- Total: ~$3.00/mo

- Paying for the SaaS instead: $5.00 - $10.00/user/mo
- Build time: 35-50 hours
- AI tool credits: $20.00 (Claude Pro / Cursor)
- Break-even: Never (built for learning and personal use)

## Sources

- [Trello Official Website & Pricing](https://trello.com)
- [Atlassian Tech Blog - Trello Architecture](https://atlassian.com/blog)