How to vibe codeMilanote

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack development environment.

• GitHubfree

  Code repository hosting and integration with Vercel deployment pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file features, managing database schemas, and writing complex React components.

• Cursor

  Ideal AI code editor for inspecting canvas diffs, refining spatial drag-and-drop interactions, and styling UI components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project, configure Tailwind CSS, set up Turso with Drizzle ORM, and configure better-auth for single-user authentication.

   Scaffold a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS v4. Initialize Drizzle ORM configured with a Turso SQLite database connection. Create database schemas for users, workspaces, boards, and canvas_nodes. The canvas_nodes table must store id, board_id, type (note, image, link, column), x coordinate, y coordinate, width, height, z-index, and content (JSON payload for text, URLs, or file references). Configure better-auth for email/password authentication with Turso adapter support. Ensure all TypeScript types are fully articulated and strict mode is enabled. Write a migration script and verify local connectivity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Infinite Spatial Canvas Core Mechanics

   Build the infinite pannable and zoomable canvas viewport with custom pointer event handlers and node positioning logic.

   Create a high-performance interactive InfiniteCanvas React component in src/components/canvas/InfiniteCanvas.tsx. Implement mouse drag panning, scroll wheel zooming (clamped between 0.1x and 4x), and coordinate transformation mapping between screen space and canvas world space. Add support for creating sticky notes, text blocks, and color-coded cards directly on the canvas via a toolbar. Implement client-side local state management for node dragging with CSS transform matrices to guarantee 60fps fluid rendering without full-tree React re-renders. Ensure proper touch and mouse event isolation so panning does not conflict with dragging individual nodes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Heterogeneous Node Renderers & Asset Uploads

   Implement specialized node components for notes, links, and file/image uploads backed by UploadThing.

   Build modular node renderer components inside src/components/canvas/nodes/ for StickyNoteNode, TextNode, LinkNode, and ImageNode. Integrate UploadThing for binary file and image uploads, allowing users to drag and drop images or documents directly onto the canvas or paste them from the clipboard to generate an ImageNode. Implement a search modal that queries the Pexels API to let users pick and insert stock photography onto the canvas. Store node content updates debounced via Server Actions to persist coordinates and text state back to Turso.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-Time Multiplayer Collaboration with Liveblocks

   Integrate Liveblocks to enable real-time collaborative editing, presence cursors, and live board updates.

   Integrate Liveblocks into the infinite canvas architecture to support real-time multi-user collaboration. Configure Liveblocks room provider and Yjs client bindings to synchronize canvas node positions, resizing events, and node creation across active sessions. Implement remote user presence indicators and colored cursor overlays showing collaborators' names and current positions on the canvas. Handle edge cases where concurrent node drags by multiple users occur without race conditions or jittery position resets. Verify multi-tab synchronization works smoothly locally.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Board Hierarchies and Navigation Sidebar

   Add nested board creation, breadcrumb navigation, and sidebar workspace management.

   Develop a collapsible sidebar component in src/components/sidebar/WorkspaceSidebar.tsx that displays a hierarchical tree of boards and nested sub-boards. Implement Server Actions and database relations allowing users to create sub-boards inside existing boards, move nodes between boards, and use breadcrumbs at the top of the canvas viewport to navigate back up the hierarchy. Ensure board deletion cascades cleanly to child boards and associated canvas nodes. Style the sidebar to match Milanote's clean, minimalist creative aesthetic using Tailwind CSS.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Comment Threads, and Verification

   Add node-level commenting, keyboard shortcuts, export utilities, and run a comprehensive QA pass.

   Implement node-level commenting threads where users can click any canvas node to open a comment drawer, leave feedback replies, and resolve discussion items. Add global keyboard shortcuts (e.g., Space+Drag to pan, Delete/Backspace to remove selected nodes, Cmd+Z for history undo/redo). Build a lightweight board export utility that generates a clean layout summary. Audit all components for accessibility, responsive error boundaries, and loading skeletons. Write integration tests for board node persistence and verify the build compiles cleanly without errors.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Milanote