# How to Vibe Code Your Own Supernotes (and Stop Paying for It) > The best collaborative note-taking app - Site: https://supernotes.app - Category: Productivity & Note-Taking - Verdict: **Solid side project** (62/100 vibecodeable) - Estimated effort: 2-4 weeks part-time ## Verdict You can build a personal subset of Supernotes with a single developer and modern AI tooling, but handling real-time CRDT multiplayer sync and graph visualization will test your patience. Supernotes combines several complex subsystems into a tight package: a local-first offline database, real-time multiplayer editing with CRDTs, and a 2D/3D graph visualization engine. While AI coding tools will generate the Next.js UI, Tailwind styling, and Markdown parser instantly, you will spend days debugging WebSocket reconnect edge cases, CRDT merge conflicts in local IndexedDB storage, and graph rendering performance. For personal use, paying £6/month is vastly more rational than spending 3 weeks of evenings wrestling with multiplayer sync bugs—unless you are building this specifically to master distributed frontend state. ### What you can't replicate - The exact SN Pro typography and 8 years of micro-polish - The existing community and cross-platform native app store presence - The exact network graph data of the original platform ## What it does Collaborative personal knowledge management and note-taking platform using an atomic, index-card metaphor with multi-parent nesting, bi-directional links, and real-time multiplayer editing. ### Core features - Atomic notecard editor with 1,200 character soft limit, Markdown, and LaTeX math - Multi-parent nesting and bi-directional linking system - Interactive 2D/3D knowledge graph visualizer - Real-time multiplayer co-editing with cursor tracking - Offline-first local caching with background conflict resolution - Task and heatmap calendar views - AI-assisted proofreading and smart tagging ## The business ### Pricing - Starter: Free — All essential features capped at 100 base notecards. - Unlimited: £6/mo — Everything in Starter with unlimited cards and AI superpowers. ### Funding £150K raised. - Pre-seed Investors: Flamefinch Partners, Y Combinator Startup School, King's College London, NatWest Entrepreneur Accelerator, UCL Educate Founded 2018. Team size: 2 co-founders. ## The hard parts - Implementing CRDTs (e.g. Yjs) for real-time concurrent text editing and presence over WebSockets - Building a local-first offline storage engine with bulletproof background state sync - Rendering performant 3D/2D bi-directional knowledge graphs with thousands of nodes - Designing a multi-parent tree structure that breaks traditional single-parent folder hierarchies ## How to vibe code Supernotes ### Prerequisites - Node.js (free): Required runtime for Next.js development and package management - GitHub (free): Source code control and deployment pipeline integration ### Recommended AI tools - Claude Code: Autonomous multi-file agentic coding for scaffolding the editor, database schema, and WebSocket sync layer - Cursor: Iterative UI refinement for the sidebar, graph view, and card layout components ### Stack - Frontend: Next.js - Backend: Next.js API routes with Node WebSocket server - Database: Turso - Auth: better-auth - Payments: none - Other: Liveblocks, Tailwind CSS, Vercel AI SDK ### Hosting - Fly.io (Hosting the Node.js backend server with persistent WebSockets for real-time multiplayer collaboration): $3-5/mo - Cloudflare (Hosting the Next.js frontend application and edge routing): $0/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js application, configure Tailwind CSS with custom typography, and set up the Turso SQLite database schema for atomic cards, multi-parent relationships, and bi-directional links. ``` Scaffold a new Next.js project using TypeScript and Tailwind CSS. Set up Turso database connection via libSQL. Create database migrations and models for 'cards' (id, content, character_count, color, tags, targeted_date, created_at, updated_at), 'card_parents' (card_id, parent_id for multi-parent nesting), and 'card_links' (source_id, target_id for bi-directional graph connections). Ensure proper indexing for fast recursive querying of nested cards. ``` 2. **Atomic Notecard Editor and Markdown Parser** — Build the core notecard component featuring a 1,200 character soft limit indicator, Markdown rendering, LaTeX math support, and keyboard shortcut listeners for rapid card creation. ``` Create a React component for the atomic notecard with a live character count indicator warning when approaching or exceeding the 1,200 character soft limit. Integrate a Markdown parser with support for LaTeX math equations, checklists, and inline tables. Implement global keyboard shortcuts that instantly trigger new card creation and navigation across cards without touching the mouse. ``` 3. **Real-Time Multiplayer Collaboration** — Integrate Liveblocks with Yjs to enable real-time co-editing, remote cursor tracking, and presence indicators for shared notecards. ``` Integrate Liveblocks and Yjs into the Next.js frontend to power real-time multiplayer collaboration on individual notecards and collections. Implement live cursor tracking showing collaborator avatars, active presence indicators, and conflict-free concurrent editing for Markdown text inputs. ``` 4. **Knowledge Graph Visualizer** — Develop an interactive 2D graph view using Canvas or D3.js to render bi-directional links between notecards dynamically. ``` Build an interactive 2D graph visualization component using D3.js or canvas-based rendering that fetches all notecards and their bi-directional links. Render nodes color-coded by their assigned card color and edges representing links. Allow clicking any node to center the viewport and navigate directly to that notecard. ``` 5. **Offline-First Storage and Sync** — Implement client-side caching with IndexedDB to support offline creation and editing, with automatic queue reconciliation upon reconnection. ``` Implement an offline-first storage layer using IndexedDB (via Dexie.js) to cache all user cards locally. When offline, queue mutations (create, update, delete) in a persistent sync queue. When network connectivity is restored, automatically replay queued mutations against the Turso backend and resolve merge conflicts gracefully. ``` 6. **Calendar Heatmap and Task Views** — Add activity heatmap calendar views and automated task extraction collectors to aggregate open action items across all cards. ``` Build a calendar heatmap view that aggregates note creation and interaction counts per day, allowing users to drag and drop notecards onto dates to assign targeted dates. Create a dedicated 'Tasks Collection' view that parses all markdown checklists across cards and displays open action items in a centralized review interface. ``` 7. **AI Proofreading and Polish** — Integrate the Vercel AI SDK to provide optional smart tagging, grammar checking, and organizational improvement suggestions for notecards. ``` Integrate the Vercel AI SDK into the editor interface to provide opt-in AI superpowers. Add a button that sends the current notecard content to an LLM endpoint to suggest relevant tags, identify typos, and offer concise structural improvements without overwriting original text automatically. ``` ### Cost vs paying **Starting costs (one-time):** - Claude Pro (AI coding agent subscription): $20 - Custom domain (optional): $12/yr - Total: ~$32 one-time **Ongoing costs (monthly):** - Fly.io (WebSocket backend): $3-5/mo - Turso & Cloudflare: $0/mo - Anthropic API (AI features): ~$2/mo - Total: ~$5-7/mo - Paying for the SaaS instead: £6/mo (~$8/mo) - Build time: 40-60 hours - AI tool credits: $20 one-time (Claude Pro) - Break-even: Never (paying £6/mo is cheaper than your time, build only for learning) ## Sources - [Supernotes Official Website & Marketing Pages](https://supernotes.app) - [Supernotes Pricing & FAQ Framework](https://supernotes.app/pricing) - [Supernotes Features Overview](https://supernotes.app/features)