Evernote

Prerequisites

• Node.jsfree

  Required for running the Next.js frontend and build tooling.

• GitHubfree

  Version control and deployment integration.

• Supabase Accountfree

  Provides hosted PostgreSQL database, authentication, and vector storage for semantic search.

AI coding tools

• Claude Code

  Best-in-class agentic terminal coding tool for scaffolding full-stack features and executing multi-file refactors.

• Cursor

  Ideal AI-native code editor for fine-tuning UI components, rich-text editors, and inspecting component diffs.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS and configure the Supabase database schema for users, notebooks, notes, tasks, and tags.

   Create a new Next.js project using TypeScript, App Router, and Tailwind CSS. Install shadcn/ui components including button, dialog, dropdown-menu, input, textarea, and tabs. Set up Supabase client helpers using @supabase/supabase-js and @supabase/ssr. Write a complete SQL migration file for Supabase PostgreSQL that defines the following tables: users, notebooks (id, user_id, title, created_at), notes (id, notebook_id, user_id, title, content_html, content_json, is_pinned, created_at, updated_at), tags (id, user_id, name), note_tags (note_id, tag_id), and tasks (id, note_id, user_id, title, due_date, is_completed, created_at). Enable Row Level Security (RLS) on all tables with appropriate policies ensuring users can only read and write their own data. Include indexes on foreign keys and user_id fields.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Dashboard Layout

   Implement Supabase authentication flows (sign up, login, password reset) and build the core multi-pane dashboard layout mimicking Evernote Home and notebook navigation.

   Implement Supabase Auth with email/password authentication and a protected route middleware for Next.js App Router. Build an authentication page at /auth with clean login and sign-up tabs. Create a main dashboard layout at /app with a collapsible sidebar containing navigation items (Home, Notes, Notebooks, Tasks, Trash), a central note list pane with search and sorting filters, and a right-hand workspace viewing pane. Style using Tailwind CSS to closely match a modern minimalist productivity UI. Ensure mobile responsiveness with collapsible drawer navigation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Rich Text Note Editor and Notebook Management

   Integrate a rich text editor (such as TipTap) into the note view pane and implement full CRUD operations for notebooks and notes.

   Integrate TipTap rich text editor into the note viewing pane component with support for bold, italic, headings, bullet lists, blockquotes, and code blocks. Build robust auto-saving functionality with a debounced API call (saving content_html and content_json to the Supabase notes table) and a visual saving indicator ('Saved' vs 'Saving...'). Implement notebook creation, renaming, and deletion modals in the sidebar, allowing users to organize notes into specific notebooks. Add support for pinning notes to the Home dashboard view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embedded Tasks and Calendar Integration UI

   Build an interactive task management widget that allows creating to-do items inside notes and connecting simulated Google/Outlook calendar events.

   Create an interactive Task component that can be embedded directly inside notes or viewed in a centralized Tasks page. Tasks should include checkboxes, due date pickers, and priority flags synced to the tasks table. Build a Calendar widget component in the Home dashboard that renders upcoming scheduled events, allows connecting external calendar placeholders (Google/Outlook OAuth stubs), and provides a button to instantly create and link a new meeting note to a specific calendar event.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Assistant and Semantic Search RAG Pipeline

   Implement an AI assistant chat panel and semantic search functionality using pgvector and OpenAI embeddings.

   Add a pgvector column to the notes table in Supabase and write a database function for vector similarity search. Implement a server-side routine using the OpenAI API to generate and store embeddings whenever a note is created or updated. Build an AI Assistant chat panel slide-over component in the UI that accepts natural language queries, performs vector similarity search over the user's notes, constructs a RAG context prompt, and streams responses back using the OpenAI chat completions API. Enable users to search, summarize, and ask questions about their notes directly from the chat panel.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Evernote