How to vibe codeEvernote

Prerequisites

• Node.jsfree

  Required for running Next.js frontend and TypeScript backend services.

• GitHubfree

  Source control and deployment pipeline integration.

• Anthropic API KeyPay-as-you-go

  Powers the AI Assistant chat and semantic note summarization features.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file full-stack applications and handling complex debugging loops.

• Cursor

  Ideal code editor for reviewing diffs, fixing UI component states, and fine-tuning Tailwind styling.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, better-auth, and Drizzle ORM connected to Turso. Define the relational schema for users, notebooks, notes, tags, and note_tags.

   Initialize a new Next.js TypeScript project with Tailwind CSS and App Router. Configure Drizzle ORM to connect with Turso (SQLite). Create database tables for users, notebooks (id, userId, title, createdAt), notes (id, notebookId, userId, title, contentJson, contentText, isPinned, createdAt, updatedAt), tags (id, userId, name), and a note_tags junction table. Implement better-auth for secure email/password authentication. Ensure all migrations run smoothly and include a clean dashboard layout with a sidebar for notebooks and tags using Tailwind CSS and Lucide icons.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Rich Text Note Editor & Notebook Management

   Build a rich text note-taking interface supporting notebooks, tags, pinned notes, and instant auto-saving.

   Create a rich-text note editor component using a modern WYSIWYG library (like TipTap or portable text editor) integrated into the Next.js dashboard. Build UI panels for managing notebooks and tags, allowing users to create, rename, and delete notebooks and assign tags to notes. Implement debounced auto-saving on the note editor that updates the note's contentJson and plain-text representation in the Turso database. Add support for pinning notes to the top of the notebook view and organizing scratchpads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Task Management & Checklists

   Implement inline task extraction and to-do list management embedded directly within notes.

   Add task management capabilities to the note-taking app. Create a tasks table linked to notes (id, noteId, userId, title, dueDate, isCompleted). Implement a dedicated 'Home' dashboard view that aggregates all incomplete tasks across all notes with options to check them off, set due dates, and filter by priority. Build an inline task widget inside the note editor that lets users convert any checklist item into an actionable tracked task.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Semantic Search & Vector Embeddings

   Implement vector embeddings for notes using local embedding generation or Anthropic embeddings, enabling natural language semantic search.

   Integrate semantic search into the note app. Whenever a note is created or updated, generate text embeddings of its content using an embedding model or Anthropic API, and store them in a vector-capable column or separate vector store table. Build a search bar that accepts natural language queries, computes cosine similarity against stored note embeddings, and returns ranked relevant notes alongside traditional keyword search results.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Assistant Chat & RAG

   Build an AI Assistant chat panel that performs Retrieval-Augmented Generation (RAG) over the user's personal notes database.

   Build an AI Assistant side panel in the note app powered by the Anthropic API (Claude Sonnet). Implement a RAG pipeline where user questions typed into the assistant chat automatically query the user's note embeddings via cosine similarity, inject relevant note excerpts into the system prompt, and stream back cited answers, summaries, or content rewrites directly into the active note.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Web Clipper Extension & File Attachments

   Create a browser extension or web clipping utility and file attachment upload pipeline using Cloudflare R2.

   Build a file attachment upload system supporting images and PDFs stored in Cloudflare R2, linking attachment records to specific notes. Additionally, build a simple browser extension (Manifest V3) or bookmarklet tool that extracts the clean article text and page title from active browser tabs and sends them via API to create a new note in the user's designated 'Clippings' notebook.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Evernote