How to vibe codeDabble

Prerequisites

• Node.js LTSFree

  Required runtime for executing the Next.js frontend and local build scripts.

• GitHub accountFree

  Repository hosting and continuous deployment integration.

• Supabase accountFree

  Provides PostgreSQL database and built-in authentication for your writing workspace.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding database schemas, writing complex React components for the plot grid, and debugging state synchronization.

• Cursor

  Ideal IDE fork for fine-tuning text editor UI components, markdown rendering, and CSS focus mode styles.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS and configure the Supabase database schema for manuscripts, chapters, scenes, plot grid points, and character profiles.

   Create a new Next.js TypeScript project using App Router, Tailwind CSS, and Lucide React. Set up a Supabase client configuration file in utils/supabase. Write a complete SQL migration file that defines tables for 'projects' (id, title, user_id, description), 'manuscript_items' (id, project_id, parent_id, type [book/chapter/scene], title, content, sort_order), 'plot_cards' (id, project_id, title, description, chapter_id, arc_name, color), and 'character_profiles' (id, project_id, name, bio, image_url). Include foreign key constraints, indexes on project_id, and Row Level Security policies allowing users to manage only their own data. Output all configuration and migration files with clean directory structures.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Dashboard Shell

   Implement authentication using better-auth or Supabase Auth and build a responsive dashboard shell to list, create, and manage multiple novel projects.

   Implement user authentication in the Next.js app using Supabase Auth or better-auth supporting email/password login and sign-up flows. Build a main dashboard page at /dashboard that fetches the authenticated user's novel projects from the database, displays them in a clean grid layout with cover placeholders, and includes a modal to create a new manuscript project with a title and subtitle. Add proper loading states, error handling, and navigation links pointing to /project/[id].

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Hierarchical Manuscript Tree and Sidebar Navigation

   Build a left sidebar sidebar component that renders books, chapters, and scenes in a collapsible tree with drag-and-drop reordering capabilities.

   Build a manuscript navigation sidebar component for the project workspace at /project/[id]. It must fetch and render a hierarchical tree of books, chapters, and scenes for the active project. Implement drag-and-drop reordering using dnd-kit so users can rearrange chapters and scenes. Add buttons to add new chapters, add new scenes, delete items, and rename items directly in the tree. Ensure state updates optimistically and syncs changes back to the Supabase 'manuscript_items' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Distraction-Free Rich Text Editor and Word Count Tracker

   Integrate a modern rich-text editor (such as TipTap) with a distraction-free focus mode toggle, sticky notes, and a live daily word count goal tracker.

   Create a rich-text writing canvas component using TipTap inside /project/[id]/write. The editor should support bold, italics, headers, blockquotes, and auto-saving text changes to the database on a debounce timer. Build a top header bar displaying the active scene title, current word count, and daily word count progress bar against a customizable goal. Add a 'Focus Mode' toggle button that hides the sidebar and navigation panels, leaving only a centered, distraction-free writing window with customizable dark/light background themes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Visual Plot Grid and Character Notebook

   Develop the visual Plot Grid interface mapping chapters against narrative arcs and build the character profile and worldbuilding notebook views.

   Build a visual Plot Grid view component at /project/[id]/plot that renders a matrix grid where columns represent plot lines or story arcs and rows represent chapters or scenes. Allow users to add, edit, and drag plot cards across grid cells, persisting positions to the 'plot_cards' table. Additionally, build a character profile tab at /project/[id]/characters that displays a grid of character cards with avatar images, physical traits, and backstory fields, backed by the 'character_profiles' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export Utilities and Read-to-Me Text-to-Speech

   Implement manuscript export utilities to compile chapters into downloadable Word (.docx) or text files, alongside a browser speech synthesis text-to-speech feature.

   Implement an export feature in the project settings that compiles all chapters and scenes of a manuscript into a clean plaintext or formatted download file. Also, build a 'Read to Me' audio player toolbar at the bottom of the editor using the browser's built-in Web Speech API (window.speechSynthesis) to read the active scene text aloud with play, pause, and stop controls.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Dabble