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

> The all-in-one multi-project management and collaboration platform

- Site: https://zenkit.com
- Category: Project Management & Collaboration
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 4-6 weeks of part-time work

## Verdict

You can build a personal single-user subset with Kanban and Table views, but synchronization across 6 distinct visualization engines will test your architectural stamina.

Zenkit is not a simple CRUD app; its core architectural marvel is a unified data collection that instantly renders and mutates across Kanban boards, Gantt charts, relational tables, and mind maps. While an AI coding agent can spin up the Next.js frontend and database schema in days, orchestrating live state synchronization across multiple rendering engines, rich commenting, and offline caching requires significant engineering discipline. For a personal task manager, paying for a subscription is far more efficient than weeks of debugging state invariants.

### What you can't replicate

- The entire suite of integrated products (Hypernotes, Zenforms, Zenchat)
- Enterprise audit compliance and SCIM provisioning infrastructure
- Deep native desktop and mobile wrappers with native offline parity

## What it does

Zenkit is a flexible data workspace that allows users to instantly switch views between Kanban boards, tables, lists, mind maps, calendars, Gantt charts, and dashboards, backed by real-time collaboration and offline support.

### Core features

- Multi-model view switching (Kanban, Table, List, Gantt, Mind Map, Calendar)
- Custom fields and relational references between collections
- Real-time collaboration with comment threads and @mentions
- Activity tracking and customizable live dashboard reports
- Offline-first client-side synchronization and local caching
- Automation recipes and task assignment inbox

## The business

### Pricing

- Plus: €8.00/mo — For individuals or small teams to stay organized
- Team: €12.00/mo — For growing teams to gain project overviews
- Business: €21.00/mo — For companies to align goals and manage multi-projects
- Enterprise: Custom — For companies that need scalable project management

Founded 2016.
Team size: 13-15.

## The hard parts

- Keeping underlying relational state synchronized across wildly different view paradigms (Kanban vs Gantt vs Mind Map) without performance degradation
- Building robust offline-first local storage (IndexedDB) with conflict resolution and retry queue upon reconnection
- Real-time WebSocket presence and cursor sync across multi-user sessions
- Complex Gantt calculations (lag, lead, milestones, and critical path)

## How to vibe code Zenkit

### Prerequisites

- Node.js (free): Required runtime for running Next.js and package management
- GitHub (free): Version control and deployment pipeline integration
- Cursor (free tier): AI-native code editor for iterative multi-file frontend development

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding complex multi-file Next.js architectures
- Cursor: Ideal for fine-tuning complex UI components like drag-and-drop Kanban columns and Gantt timelines

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui
- Backend: Next.js API Routes / Server Actions
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: None (Personal clone)
- Other: Liveblocks for real-time multiplayer presence and cursors, Zustand for client-side view state management, Vercel AI SDK

### Hosting

- Cloudflare (Hosting frontend and edge serverless routes): $0-5/mo
- Turso (Serverless SQLite database storage): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for secure user authentication.

```
Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install Drizzle ORM and configure it to connect to a Turso SQLite database. Define the core database schema tables: users, workspaces, collections, items, fields, comments, and activity_logs. Items must support custom dynamic attributes stored in JSON fields or relational key-value rows. Set up better-auth with email/password authentication and hook it into the Turso database. Ensure all migrations run smoothly and include seed scripts for a sample project workspace.
```

2. **Core Relational Table View & Custom Fields** — Build the foundational table view with dynamic custom field definitions (Text, Number, Date, Labels) and inline cell editing.

```
Build a responsive spreadsheet-like Table View component in Next.js using shadcn/ui. The view must dynamically render columns based on the collection's field definitions (Text, Number, Date, Select/Labels). Implement inline cell editing that immediately updates item attributes via Server Actions and persists changes to Turso. Add advanced filtering and sorting controls that update URL query parameters and filter the active item list instantly.
```

3. **Kanban Board View & Drag-and-Drop** — Implement the Kanban board visualization grouped by label or status fields with fluid drag-and-drop mechanics.

```
Create a multi-column Kanban board view component that groups collection items by any label or status field. Integrate dnd-kit for fluid drag-and-drop card reordering across columns and priority matrices. When a card is dragged to a new column, trigger an optimistic UI update and dispatch an API call to mutate the underlying item's field value. Include quick-add card inputs at the bottom of each column.
```

4. **Gantt Timeline & Calendar Views** — Develop scheduling visualizations for project timelines with start/due dates and milestone tracking.

```
Build a Gantt Chart timeline view and a Team Calendar view for collection items possessing date ranges. Use a lightweight timeline rendering library or custom SVG/CSS grid to display tasks across days/weeks/months with dependency bars and milestones. Ensure clicking an item opens a side drawer showing full item details, checklists, and activity logs.
```

5. **Real-Time Collaboration & Comments** — Integrate real-time presence indicators, comment threads, and activity tracking across workspaces.

```
Integrate Liveblocks into the workspace views to display live user presence avatars and active cursors. Build a threaded comment component attached to individual items supporting rich text markdown input and @mentions. Implement an activity tracking feed that records every item creation, field change, and comment addition in real time.
```

6. **Offline-First Synchronization & Polish** — Implement local caching with IndexedDB to support seamless offline operation and reconnection queueing.

```
Implement an offline-first caching layer using IndexedDB and Service Workers in the Next.js client application. Store collections, items, and view configurations locally so the app remains fully functional without an internet connection. Build a sync queue manager that records mutations made offline and automatically replays them against the server API upon reconnection, displaying a clear sync status indicator in the UI.
```

### Cost vs paying

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

- Custom domain (optional): $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Cloudflare / Turso hobby tiers: $0/mo
- Total: ~$0/mo

- Paying for the SaaS instead: €12.00/mo (Team plan)
- Build time: 45-60 hours
- AI tool credits: $20/mo (Claude Pro / Cursor Pro)
- Break-even: 0 months (Purely for learning and personal customization)

## Sources

- [Zenkit Home Page](https://zenkit.com)
- [Zenkit Pricing Page](https://zenkit.com/en/pricing/)
- [Zenkit Features Page](https://zenkit.com/en/features/)
- [GetLatka - Zenkit Revenue and Company Profile](https://getlatka.com/companies/zenkit)