How to vibe codeCreately

Prerequisites

• Node.jsfree

  Required runtime environment for building and executing the full-stack web application.

• GitHubfree

  Version control and repository hosting to back up your code and deploy updates.

AI coding tools

• Claude Code

  Best-in-class agentic coding CLI for multi-file architecture scaffolding, recursive debugging, and implementing complex mathematical canvas algorithms.

• Cursor

  Ideal AI code editor for inspecting canvas diffs, refining React component UI layouts, and tweaking interactive pointer event handlers.

Build guide

1. 01Project Scaffolding & Authentication

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and implement self-hosted email/password authentication using better-auth.

   Create a new Next.js project with Tailwind CSS and TypeScript. Set up better-auth with email/password authentication backed by a Turso SQLite database using Drizzle ORM. Build a clean dashboard view showing a list of user workspaces, allowing the user to create, rename, and delete infinite workspaces. Ensure all routes are protected with appropriate middleware.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Infinite Canvas Viewport & Zoom/Pan Engine

   Build an infinite canvas viewport component supporting smooth mouse-drag panning, wheel-based zooming, and coordinate transformation matrices.

   Build an infinite canvas React component using HTML5 Canvas or SVG layers. Implement smooth pan-and-zoom functionality where mouse wheel zooms centered on the cursor position and dragging empty space pans the view. Maintain a viewport state object storing pan (x, y) and zoom scale. Add a mini-map or coordinate status indicator in the corner of the screen.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Vector Shapes, Nodes & Drag-and-Drop Toolkit

   Implement shape libraries (rectangles, circles, sticky notes, UML boxes) with drag-and-drop placement, resizing handles, and property editing.

   Implement a shape rendering and manipulation system on the infinite canvas. Create a sidebar UI with shape categories (flowchart, sticky notes, containers). Allow users to drag shapes onto the canvas, select them, move them by dragging, and resize them using bounding box handles. Add a properties inspector panel on the right sidebar to edit shape text, background color, border width, and custom data attributes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Smart Connectors & Anchor Routing

   Develop connector lines that attach to shape anchor points and dynamically route or recalculate paths when connected shapes are repositioned.

   Implement smart connector lines between canvas shapes. When hovering over a shape, display connection anchor points on its edges. Allow users to click and drag from an anchor point to another shape to create a directional connector line. Ensure that when either connected shape is dragged around the canvas, the connector line automatically recalculates its orthogonal or bezier path to remain attached to the anchor points.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Real-time Multiplayer Collaboration

   Integrate Liveblocks for real-time presence, multi-user cursor tracking, and collaborative state synchronization across active canvas sessions.

   Integrate Liveblocks into the canvas app for real-time multiplayer collaboration. Set up room provider hooks to broadcast user presence, live cursor positions with user names, and real-time state updates for shape positions, additions, and deletions so multiple browser tabs see changes instantly without race conditions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Custom Databases & Data-Backed Shape Properties

   Build a toggleable custom database table view at the bottom of workspaces where individual canvas shapes link directly to underlying relational records and attributes.

   Build a custom database view component accessible from the workspace toolbar, structured like a lightweight Airtable spreadsheet. Allow users to define custom columns (Text, Number, Status, Select, Date) and link individual canvas shapes to specific table rows. Ensure that updating a property in the table updates the shape's data attributes and vice versa.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07AI Diagram Generation & Export Pipelines

   Incorporate an Anthropic API integration to parse text prompts and programmatically generate layout nodes and connectors, alongside SVG/PNG export options.

   Add an AI diagram generation feature via an API route calling the Anthropic API. Create a modal where users can type a natural language prompt describing a workflow or system architecture. The LLM should return structured JSON representing nodes and edges, which the frontend then automatically renders and lays out onto the infinite canvas. Also implement a client-side export utility that serializes the canvas SVG into downloadable PNG and SVG image files.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Creately