How to vibe codeNovlr

Prerequisites

• Node.jsfree

  Runtime environment for local Next.js development

• GitHubfree

  Source code control and repository hosting

AI coding tools

• Claude Code

  Terminal agent to scaffold the Next.js app, database schema, and editor components end-to-end

• Cursor

  AI code editor for iterative UI polish, theme adjustments, and CSS focus modes

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS and configure the Turso SQLite database schema for projects, chapters, scenes, and word-count logs.

   Scrape together a clean Next.js 16 project using TypeScript and Tailwind CSS v4. Set up a Turso libSQL database client connecting via environment variables. Create the database schema with tables for 'projects' (id, title, user_id, created_at), 'chapters' (id, project_id, title, sort_order), 'scenes' (id, chapter_id, title, content, word_count, sort_order), and 'daily_goals' (id, user_id, target_words, current_words, date). Ensure migrations run successfully on startup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Distraction-Free Writing Studio and Editor

   Implement a minimalist rich-text editor using TipTap or ProseMirror with distraction-free focus mode, typewriter scrolling, and live word counting.

   Build a distraction-free writing studio view in Next.js featuring a sidebar collapsible navigation tree for chapters and scenes, and a centered minimalist writing canvas using TipTap. Implement typewriter scrolling mode that keeps the active cursor line vertically centered, a full-screen toggle mode, and real-time word and character count calculations displayed in a bottom status bar.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Local-First Offline Caching with IndexedDB

   Add robust client-side storage fallback using IndexedDB so typing remains seamless and resilient during network drops.

   Integrate client-side Dexie.js or native IndexedDB caching into the writing canvas. Every keystroke should instantly save to local IndexedDB and debounce a background synchronization payload to the Next.js backend API. Add an offline status indicator banner at the top of the window if network connectivity is lost.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04World-Building Notes Sidebar

   Create a split-pane or slide-out sidebar for pinned research, character profiles, and lore notes alongside the manuscript editor.

   Build a slide-out notes sidebar component for the writing studio. The notes table should support categories like 'Characters', 'Locations', and 'Lore' with markdown text support. Allow writers to pin specific reference notes side-by-side with the active manuscript scene for easy world-building reference.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Habit Streaks, Goals, and Analytics Dashboard

   Build a dashboard showing writing streaks, daily word goals progress rings, and historical productivity graphs.

   Create a productivity analytics dashboard page. Calculate daily writing streaks by tracking consecutive days with word count increments greater than zero. Render visual progress circles for daily drafting goals and a 7-day bar chart showing word counts added per day. Include a countdown writing sprint timer widget that logs words written during timed focus sessions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Novlr