VisionBoard

An AI-Powered product management and team workspace

Comment

Inspiration

Modern product, engineering, and cross-functional teams often operate in a fragmented tool ecosystem:

  • High-level quarterly goals and OKRs live in static spreadsheets.
  • Product requirements documents (PRDs) live in Notion or Confluence.
  • Sprint tasks and bug tracking live in Jira or Linear.
  • Visual roadmaps and whiteboards live in Miro or Figma.
  • AI writing assistants operate as generic text boxes with no knowledge of team context.

When PRDs change or engineering sprints get delayed, roadmaps quickly become stale, cross-functional visibility degrades, and teams waste hours in status update meetings.

VisionBoard was born out of a vision to build an AI-native, end-to-end workspace that seamlessly bridges high-level strategy (OKRs and visual roadmaps) directly to tactical execution (sprints, tasks, PRDs, and real-time multiplayer boards). By combining vector RAG context, automated dependency scheduling, and role-tailored dashboards, VisionBoard ensures that every line of code written connects back to strategic business goals.

What it does

VisionBoard transforms how teams plan, build, and ship software through five core capabilities:

  1. AI-Powered Product Roadmap & Goal Deconstructor

    • Roadmap Generator: Takes unstructured PRDs, customer feedback, or strategic notes and turns them into milestone-driven product roadmaps.
    • Goal Deconstructor: Deconstructs quarterly OKRs into actionable sub-tasks, assigns story points, and calculates target dates automatically.

  2. Workspace Semantic AI Copilot (RAG Pipeline)

    • Answers complex workspace questions with direct citations to documents, tasks, comments, and milestones.
    • Processes natural language commands (e.g., "Reassign all high-priority blocked tasks in Sprint 3 to Alex") and executes edits across the workspace in real time.

  3. Interactive Gantt Canvas & Auto-Scheduling Engine

    • Features drag-to-resize duration and drag-to-shift dates with Finish-to-Start (FS) constraints.
    • Performs Directed Acyclic Graph (DAG) validation to detect circular dependencies.
    • Uses the Critical Path Method (CPM) to highlight zero-slack bottleneck tasks and calculate schedule drift against original baselines.

  4. Role-Tailored Workspaces & Dashboards

    • Product Managers: Visual roadmaps, Goal Health Scores, RICE prioritization, and Kanban task boards.
    • Executives: Portfolio health matrices, strategic alignment scores, and automated board meeting summaries.
    • Engineering & Ops: Sprint velocity tracking, blocker dependency graphs, and VCS integration management.
    • Marketing & Growth: Go-To-Market launch control linked directly to engineering feature drops.

  5. Multiplayer Whiteboard Canvas & Rich-Text PRD Suite

    • Interactive board canvas for freeform visual planning linked directly to tasks.
    • Rich-text PRD document editor powered by Tiptap with context-aware comments and goal linking.

How we built it

VisionBoard is architected as a modern full-stack web app with a dedicated real-time backend and AI infrastructure:

  • Frontend Framework: Built with Next.js 16 (App Router & Turbopack), React 19, and TypeScript 5.9.
  • Design & Styling: Styled using Tailwind CSS v4 based on strict design tokens defined in, featuring custom typography (Plus Jakarta Sans), smooth micro-animations, and high-contrast color surfaces.
  • Interactive Drag-and-Drop: Built using @dnd-kit/core and @dnd-kit/sortable for Kanban boards and interactive Gantt scheduling.
  • Data Visualization: Integrated Recharts for rendering sprint velocity, team capacity, and goal health analytics.
  • Backend API & Real-Time Server: built with Node.js, Express 4.21, and a WebSocket server (ws) for real-time multiplayer board synchronization.
  • Database & Persistence: PostgreSQL managed with Prisma ORM, managing 15+ models including User, Workspace, Goal, Milestone, Task, Sprint, Document, BoardItem, ActivityLog, Notification, and WorkspaceEmbedding.
  • AI & RAG Pipeline: Integrated @anthropic-ai/sdk and openai with a vector embedding pipeline storing document/task chunks in WorkspaceEmbedding for sub-second semantic retrieval.
  • Auth & Billing: NextAuth.js (Auth.js v5) with Prisma adapter, coupled with Stripe (stripe, @stripe/stripe-js) for tiered subscriptions (Free, Startup, Growth, Enterprise).

Challenges we ran into

  1. Real-Time Vector Embedding Synchronization for RAG

    • Challenge: Keeping workspace vector embeddings in sync whenever tasks, documents, or comments were added, updated, or deleted without introducing UI latency.
    • Solution: Implemented an asynchronous background indexing pipeline that computes incremental embeddings and stores metadata tags (authorName, status, priority) directly in WorkspaceEmbedding rows for fast cosine similarity filtering.

  2. DAG Validation & Circular Dependency Auto-Scheduling in Gantt

    • Challenge: When shifting an upstream milestone in the interactive Gantt chart, downstream dependent milestones must automatically shift—without triggering infinite cascade loops or accepting circular dependencies (e.g., A depends on B, B depends on A).
    • Solution: Implemented a Directed Acyclic Graph (DAG) cycle detection algorithm before committing drag updates, and calculated Critical Path Method (CPM) zero-slack badges to alert managers of schedule bottlenecks.

  3. Multiplayer Canvas State Reconciliation

    • Challenge: Synchronizing 2D canvas coordinates (x, y, width, height) for BoardItem nodes across multiple concurrent browser sessions over WebSockets without canvas stuttering.
    • Solution: Designed a lightweight WebSocket event dispatcher with optimism-first local state updates and server-broadcast state reconciliation.

Accomplishments that we're proud of

  • End-to-End AI-Native Integration: Moving beyond basic AI prompt wrappers to create an AI assistant that reads full workspace context, cites precise internal documents/tasks, and mutates board states via natural language.
  • Fluid Interactive Gantt Canvas: Building a fully dynamic, drag-and-drop Gantt chart with Finish-to-Start dependency wiring, baseline variance tracking, and Critical Path highlighting from scratch.
  • Enterprise-Ready Full-Stack Architecture: Structuring a clean split between the Next.js client, Express/Node.js API, Prisma database layer, and WebSocket real-time engine with 18 distinct API endpoints.
  • Cohesive Design System: Crafting a polished UI with custom Tailwind CSS v4 variables, responsive micro-interactions, accessible contrast standards, and enforced cursor pointer standards across every interactive element.

What we learned

  • Context Granularity is Key for RAG: Indexing unstructured text isn't enough for workspace productivity apps; metadata like status, assignee, priority, and entity hierarchy must be passed alongside vector embeddings so the LLM can generate accurate citations.
  • Denormalization Prevents Bottlenecks: Denormalizing key fields (such as workspaceId onto the Task model) dramatically reduced expensive multi-table JOINs in high-frequency dashboard queries (GET /api/tasks).
  • Design Polish Drives Adoption: Micro-interactions, visual feedback during drag operations, and clean typography elevate developer and product tools into an intuitive experience teams enjoy using daily.

What's next for VisionBoard

As outlined in our product roadmap, the future of VisionBoard includes:

  1. Bidirectional Git & VCS Sync Engine (GitHub / GitLab)
    • Auto-linking pull requests and commits to task cards via webhooks (/api/integrations/github/webhook).
    • Automatically moving tasks to in_review when a PR opens and done when merged, updating Goal Health Scores instantly.
  2. Slack & Microsoft Teams Collaboration Suite
    • Bringing the AI Copilot into team chat channels for quick standup summaries, blocker alerts, and natural language task creation.
  3. Customer Feedback Portal & RICE Scoring Hub
    • Public-facing portal for collecting client feature requests, clustering feedback with LLMs, and ranking items using the RICE framework (Reach, Impact, Confidence, Effort).
  4. Collaborative Rich-Text PRD CRDT Multiplayer
    • Upgrading document editing with Yjs and Tiptap CRDTs to support real-time co-authoring with live multiplayer cursor presence.

Built With

Share this project:

Updates

Submission history