How to vibe codeCapacities

Prerequisites

• Node.jsfree

  Required for running the Next.js runtime and package manager

• GitHubfree

  Source control and deployment pipeline integration

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex database schemas, APIs, and React components

• Cursor

  Ideal for iterative UI styling and fine-tuning the block editor components

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS and set up Drizzle ORM with Turso. Define the core relational schema for objects, object types, properties, blocks, and bidirectional links.

   Initialize a new Next.js 16 project with TypeScript, Tailwind CSS v4, and App Router. Set up Drizzle ORM connected to a Turso SQLite database. Create the following database tables: `object_types` (id, name, icon, color, schema_definition), `objects` (id, type_id, title, created_at, updated_at), `object_properties` (id, object_id, property_name, property_value), `blocks` (id, object_id, parent_id, type, content, position), and `links` (id, source_object_id, target_object_id). Include migration files and a basic seed script with default object types like Person, Book, Project, and Meeting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and User Shell

   Implement self-hosted authentication using better-auth and build the core application layout with a sidebar for spaces, daily notes, and custom object types.

   Install and configure `better-auth` in the Next.js app with email/password authentication backed by our Turso database. Create a clean dashboard shell layout featuring a collapsible left sidebar. The sidebar must list: Daily Notes shortcut, All Objects view, Spaces switcher, and dynamically loaded Custom Object Types fetched from the `object_types` table. Add a top navigation bar with a global search trigger.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Daily Notes & Object Creation Engine

   Build the daily notes capture ritual and the modal/page system for creating custom typed objects with specific property schemas.

   Implement the Daily Notes feature: visiting `/app/daily` automatically retrieves or creates a note for the current date formatted as an object. Build an object creation modal that allows users to pick an object type (e.g. Book, Person, Project), input a title, and fill out custom metadata fields defined in that object type's schema. Store these fields in `object_properties` and render them cleanly at the top of the object detail view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Block-Based Rich Text Editor & Backlink Parser

   Integrate a block-based editor supporting markdown-style commands and implement a regex-based parser that detects `[[object name]]` mentions to generate automatic bi-directional links.

   Integrate BlockNote or TipTap into the object detail view to serve as the block-based document editor. Implement an extension or custom command parser that listens for `[[` triggers to search existing objects in the database and insert a bi-directional link. Upon saving an object's content blocks, parse all `[[object_id]]` mentions and update the `links` table so that a corresponding backlinks panel can display every referencing object.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Backlinks Panel & Graph View Visualization

   Create the sidebar backlinks component for object pages and an interactive graph visualization showing nodes and edges.

   Build a Backlinks component that queries the `links` table and displays all objects referencing the currently viewed object. Next, build a `/app/graph` route using an interactive force-directed graph library (such as `react-force-graph` or D3) that fetches all objects and links from the backend and renders them as an interactive constellation of connected knowledge nodes, allowing users to click a node to navigate directly to that object.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Global Search and Export Functionality

   Add a command-palette style global search engine and a complete JSON/Markdown export utility to ensure data portability.

   Implement a global search command palette (triggered via Cmd+K) that queries object titles and block content across the entire database with instant debounced results. Add an export settings page with a button that packages all user spaces, objects, blocks, and properties into a downloadable ZIP archive containing structured JSON and Markdown files with frontmatter.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Capacities