Notion

Prerequisites

• Node.js LTSfree

  Required for running the local development server and build tools.

• GitHubfree

  Version control and deployment pipeline source.

• Supabase Accountfree

  Managed Postgres database and authentication layer.

AI coding tools

• Claude Code

  Best-in-class terminal agent for handling complex multi-file scaffolding and schema definitions.

• Cursor

  Ideal for fine-tuning individual UI components, block state handlers, and CSS styling.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript and Tailwind CSS, configure Supabase client connections, and create the core database schema for users, workspaces, pages, and blocks.

   Initialize a new Next.js project with Tailwind CSS, TypeScript, and App Router structure. Configure Supabase SSR authentication helpers and create a migration file for a relational schema. The schema must include: 'workspaces' (id, name, owner_id), 'pages' (id, workspace_id, parent_page_id, title, icon, cover_image, is_archived, created_at, updated_at), and 'blocks' (id, page_id, type, content jsonb, position, parent_block_id, created_at). Set up appropriate foreign key constraints, indexes on page_id and workspace_id, and Row Level Security (RLS) policies ensuring users can only read and write pages within their workspace membership. Verify the setup compiles cleanly and provides typed Supabase client bindings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Sidebar and Workspace Tree Navigation

   Build the collapsible left sidebar layout supporting nested page hierarchies, page creation, deletion, and quick navigation between documents.

   Create a responsive collapsible sidebar component for our Notion clone in Next.js App Router. It should fetch and render a hierarchical tree of pages from Supabase. Implement recursive rendering to support sub-pages under parent pages. Include action buttons on hover for each page item: create sub-page, duplicate, rename, and delete (move to trash). Ensure the active page highlights correctly, and add a persistent search bar at the top that filters pages by title locally. Handle edge cases like empty states, loading skeletons, and deep nesting indentation styling cleanly using Tailwind CSS.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Block-Based Editor Core

   Implement the core document authoring interface using a block-by-block model supporting paragraph text, headings, toggles, code snippets, and basic slash commands.

   Build a block-based document editor component mimicking Notion's editing experience. Each page consists of an ordered list of blocks stored as JSON. Implement keyboard navigation: pressing Enter creates a new block below, Backspace on an empty block deletes it and focuses the previous block, and typing '/' opens a slash command menu to change block types (Heading 1, Heading 2, Bullet List, Numbered List, To-do checkbox, Code Block). Support drag-and-drop reordering of blocks using @dnd-core or similar utilities. Ensure changes auto-save with a debounce mechanism to the Supabase 'blocks' table, displaying a subtle 'Saving...' or 'Saved' indicator in the top right header.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Relational Database Tables and Views

   Add database block views supporting tabular data grids with custom property types, row sorting, and filtering capabilities.

   Create a relational database view block type for our editor. Users can insert a database table block into any page. Define a local state model for database schema: columns (name, type: text, number, select, date, status, person) and rows (key-value records). Implement an interactive data grid interface where users can add/remove columns, edit cell values inline, add new rows, and sort/filter rows by column criteria. Store the table schema and row data inside the block's content JSON column in Supabase. Include basic view toggles between Table view and Board (Kanban) view grouped by a select/status property.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Notion AI Text Assistant Integration

   Integrate an AI completion feature allowing users to highlight text or press a prompt command to generate, summarize, or rewrite content using an LLM API.

   Implement an AI writing assistant feature inside the block editor. When a user types '/ai' or selects text and clicks 'Ask AI', display a floating prompt input modal. Create a Next.js API route (/api/ai/complete) that takes the prompt and surrounding page context, communicates securely with the Anthropic or OpenAI API using server-side environment variables, and streams the generated response back to the client. Insert the streamed response as a new text block or replace the selected text. Include error handling for missing API keys, rate limits, and network dropouts during generation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Sharing, and Export Options

   Add polish including page cover image pickers, emoji icons, public web page publishing toggles, and Markdown export functionality.

   Add sharing and customization options to the page header. Implement a cover image picker allowing users to select preset gradients or upload images, alongside an emoji icon picker for page titles. Create a 'Share to Web' toggle that updates a public flag on the page and generates a public read-only route (/site/[pageId]) accessible without authentication. Add a dropdown menu item to export the current page and its nested blocks as a clean Markdown (.md) file download. Test all edge cases including broken public links and permission checks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Notion