How to vibe codeAyoa
All-in-one visual productivity, mind-mapping, and task management workspace
ayoa.com ↗Productivity & Mind Mapping
The verdict: can you vibe code Ayoa?
Build a subset for personal use if you want a local offline thinking tool, but paying $13/mo is far more rational than replicating the multi-view sync and collaboration engine.
Replicating Ayoa as a solo developer means building a complex multi-view state machine that maps the exact same underlying node data into an organic canvas, a Kanban board, a Gantt timeline, and a linear document. The hardest technical hurdle is not the CRUD data model, but engineering a performant, fluid 2D canvas with bezier curve branches, combined with real-time multiplayer cursor tracking and structured AI node generation that doesn't break JSON schemas mid-generation.
Estimated effort: 3-4 months of part-time development
What you can't replicate
- Official UK Access to Work and DSA compliance certification status
- The exact multi-decade cognitive design methodology of OpenGenius
- Enterprise customer trust and university integrations
Founded
2019
Raised
$1.45M
Team
25-30
Cheapest paid tier
$17/mo
What Ayoa does
Ayoa combines organic mind maps, whiteboards, Kanban workflows, Gantt timelines, and document outlines with AI assistance and neuro-inclusive design.
Core features
- Organic mind map node trees with bezier curves and custom colors
- Freeform whiteboards with sticky notes and freehand drawing
- Kanban workflow task boards with priority and status columns
- Gantt timeline view for milestone scheduling
- Linear document outline view synchronized with map structures
- AI prompt generation for automatic branch expansion and summarization
- Real-time multi-user collaborative editing
- Neuro-inclusive customization (font toggles, dyslexia settings, high contrast)
The business
Pricing
- FreeFree
- Ayoa Ultimate (Monthly)$17/mo
- Ayoa Ultimate (Annual)$13/mo
Funding
$1.45M from Development Bank of Wales, Mike Gibbons
Pay vs build, cumulative
Break-even at month 4 — after that, every month is money kept.
The hard parts of vibe coding Ayoa
- Building a smooth, performant 2D canvas supporting organic mind map branching alongside freeform whiteboard items
- Implementing real-time multi-user conflict-free synchronization across canvas nodes using CRDTs or operational transformation
- Maintaining instantaneous bi-directional state synchronization between distinct view schemas (Mind Map, Kanban, Gantt, and Document Outline)
- Orchestrating structural LLM outputs that translate unstructured text prompts into valid hierarchical JSON node graphs
How to vibecode Ayoa
Prerequisites
Node.jsfree
Required for running the Next.js full-stack framework and package manager.
GitHubfree
Source code repository and deployment pipeline integration.
AI coding tools
Recommended stack
| Frontend | Next.js with Tailwind CSS and React Flow / HTML5 Canvas for the mind map and whiteboard views |
|---|---|
| Backend | Next.js Server Actions and API Routes with Liveblocks for real-time multiplayer collaboration |
| Database | Turso (SQLite at the edge) for fast relational storage of user boards and nodes |
| Auth | better-auth for self-hosted, zero-cost TypeScript authentication |
| Payments | None (personal use clone) |
| Other | Anthropic API for structural mind map generation from prompts, PostHog for product analytics |
Build guide
01Project Scaffolding & Database Schema
Initialize a Next.js project with TypeScript and Tailwind CSS, configure better-auth with a Turso SQLite database connection, and define the core relational tables for users, workspaces, boards (mind map, whiteboard, kanban, gantt, document), and nodes.
Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure better-auth with SQLite via Turso. Define the database schema using Drizzle ORM with tables for users, boards (storing type as enum: mindmap, whiteboard, kanban, gantt, document), and nodes (storing id, board_id, parent_id, title, notes, position_x, position_y, metadata as JSON, and color). Implement secure session management and protect dashboard routes against unauthenticated access.02Core Board CRUD & Navigation Dashboard
Build the main dashboard allowing users to create, rename, and delete boards across different view modes, complete with modal templates and board list views.
Build a dashboard page in Next.js using Tailwind CSS that lists the user's boards grouped by type (Mind Map, Whiteboard, Workflow/Kanban, Gantt, Document). Implement server actions for creating new boards with pre-made templates, renaming boards, and deleting boards with confirmation dialogs. Add an intuitive sidebar navigation and responsive header with user profile controls.03Organic Mind Map Canvas View
Implement an interactive mind map canvas view using React Flow or custom SVG rendering that supports parent-child node branching, bezier curve connecting lines, drag-and-drop positioning, color customization, and node collapsing/expanding.
Create an interactive Mind Map canvas view using React Flow or custom SVG rendering in Next.js. Nodes must support parent-child hierarchical relationships with dynamic branch connection lines, custom background colors, font size adjustments for dyslexia accessibility support, and inline title editing. Implement drag-and-drop node repositioning that updates node coordinates in Turso via server actions, plus keyboard shortcuts for adding child nodes (Tab/Enter).04Multi-View Synchronization (Kanban, Gantt, Document Outline)
Build alternative view modes that parse the exact same underlying node data tree into a Kanban workflow board, a Gantt timeline view, and a linear document outline view.
Implement three alternative view modes for boards that share the exact same underlying node data structure: 1) A Kanban workflow view with columns for status (To Do, In Progress, Done) allowing drag-and-drop state transitions, 2) A Gantt timeline view displaying tasks across chronological start and due dates, and 3) A linear Document Outline view that nests child nodes recursively into structured headings and bullet lists. Ensure changes made in any view instantly reflect across all other views for the same board.05AI Mind Map Generation & Prompt Assistant
Integrate the Anthropic API to allow users to type a prompt or topic, automatically generating a structured JSON tree of nodes and branches to conquer blank-page paralysis.
Integrate the Anthropic API (Claude 3.5 Sonnet) into the app to power an AI assistant modal. When a user inputs a topic or research prompt, send a structured prompt instructing the model to return a JSON tree of parent and child nodes. Automatically parse the JSON response and bulk-insert the generated nodes into the current mind map board in Turso, positioning them logically around a central root node.06Real-Time Multiplayer Collaboration
Integrate Liveblocks to enable real-time multiplayer cursor tracking, presence indicators, and live co-editing of nodes across connected users on the same board.
Integrate Liveblocks into the mind map and whiteboard views to enable real-time multiplayer collaboration. Add presence indicators showing active users viewing the board, live remote cursor tracking with user name tags, and synchronized Yjs CRDT state for node positions and edits so multiple users can brainstorm simultaneously without conflicts.07Neuro-Inclusive Accessibility Settings
Add user preference toggles for custom background colors, dyslexia-friendly font options (OpenDyslexic style), high contrast modes, and node information toggles.
Build an accessibility settings modal and global state context that allows users to toggle neuro-inclusivity features: switch typography between standard sans-serif and dyslexia-friendly fonts, apply custom pastel or high-contrast background themes to reduce visual overwhelm, and toggle detailed node note visibility to minimize clutter on large mind maps. Persist these user preferences in the database.08Export Tools, Polish & Deployment
Implement export functionality for mind maps (PNG/PDF/Markdown outlines) and deploy the complete application to Vercel with environment variables configured.
Implement export utilities allowing users to download their mind maps as high-resolution PNG images, PDF documents, or Markdown structured outline files. Add error boundaries, toast notifications for all CRUD actions, write end-to-end sanity tests for board creation and node expansion, and prepare the app for seamless deployment on Vercel.
Cost vs paying for Ayoa
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- AI Coding Subscription (Claude/Cursor)$20
- Custom Domain (optional)$12/yr
Total~$32 one-time
Ongoing costs (monthly)
- Vercel Hosting & Turso DB$0/mo
- Anthropic API (AI mind map generation)~$3/mo
Total~$3/mo
Paying for Ayoa
$13/mo - $17/mo
Your time to build
40-60 hours
AI tool credits
$20 (Claude Pro or Cursor Pro)
Break-even
3 months
Vibe code Ayoa: FAQ
- Can you vibe code Ayoa yourself?
- Serious undertaking — 45/100 vibecodeable. Build a subset for personal use if you want a local offline thinking tool, but paying $13/mo is far more rational than replicating the multi-view sync and collaboration engine.
- How long does it take to vibe code Ayoa?
- 3-4 months of part-time development — roughly 40-60 hours of hands-on time with an AI coding agent.
- How do you build your own Ayoa?
- Scoped to personal use: Next.js with Tailwind CSS and React Flow / HTML5 Canvas for the mind map and whiteboard views on the front, Next.js Server Actions and API Routes with Liveblocks for real-time multiplayer collaboration behind it, Turso (SQLite at the edge) for fast relational storage of user boards and nodes for data. Follow the 8-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Ayoa without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 3-4 months of part-time development. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Ayoa instead of paying?
- About ~$32 one-time to start and ~$3/mo to run, versus $13/mo - $17/mo for Ayoa. Break-even: 3 months.
- What stack should you use to vibe code Ayoa?
- Next.js with Tailwind CSS and React Flow / HTML5 Canvas for the mind map and whiteboard views; Next.js Server Actions and API Routes with Liveblocks for real-time multiplayer collaboration; Turso (SQLite at the edge) for fast relational storage of user boards and nodes; plus Anthropic API for structural mind map generation from prompts, PostHog for product analytics.