Building a Real-Time Collaborative Tool with AI

When we set out to build a real-time collaborative kanban tool, we had ambitious goals. Real-time collaboration, deep CRM integration, AI-powered automation, and enterprise features like sprint management.

But perhaps more interesting than what we built is how we built it. Using AI as a pair programmer with carefully configured guardrails, automated testing, and test-first discipline.

The patterns we discovered have profound implications for how software will be built from here.

The Challenge

Building enterprise-grade software typically requires large teams and long timelines. We asked: what if AI could change that equation?

Complex Requirements

Real-time collaboration, CRM integration, AI automation, and enterprise sprint management in one platform.

Tight Timeline

Traditional development would take 12 to 18 months. We needed to move faster without sacrificing quality.

Multi-User Sync

Every user action needed to instantly broadcast to all connected clients with zero latency.

Automation Engine

Task movement automatically triggers webhooks, emails, and AI task generation.

Our Approach

The secret is not that AI writes faster code. It's that AI plus human plus guardrails equals fewer rewrites. We organized the workflow around four pillars.

01◇

Upfront Planning (PLAN.md)

1,600 lines of architecture

Before writing a single line of application code, we created a comprehensive architectural blueprint. Every feature, every data model, every integration was documented and agreed upon.

02◇

Living Guardrails (CLAUDE.md)

Executable documentation

Every mistake became a rule. Every production bug became a test pattern. The AI reads these rules and follows them, avoiding the same mistakes humans would make twice.

03◇

Skill-Based Workflows

Composable expertise

Instead of one AI doing everything, we used specialized modes: brainstorming, planning, implementation, and review. Separation of concerns applies to AI just as it does to code.

04◇

Test-First CI

Cheap iteration

Fast import tests catch 80% of issues in under a second. Smoke tests catch runtime problems. The bottleneck moved from 'writing code' to 'defining what correct looks like.'

“After just one weekend of development, our CLAUDE.md contained 47 rules. Each one a bug that will never happen again.”

The Power of PLAN.md

Before writing a single line of application code, we created 1,600 lines of comprehensive architectural documentation. This upfront investment paid dividends throughout development.

The plan seemed like overkill. It was not. Every hour spent planning saved days of rework. Model definitions prevented database migrations mid-project. Security patterns were built in from day one, not bolted on.

PLAN.md

›System Architecture Diagrams· ASCII diagrams showing service interactions

›Complete Model Definitions· Every table, field, and relationship documented

›Feature Breakdown by Sprint· Foundation, Boards, Tasks, Triggers, Chat, AI

›Security Patterns· Invisible columns, encrypted secrets, RLS policies

›UI/UX Design Principles· Calm, Basecamp-inspired aesthetics

Trigger System Example

## Column Triggers

When a task moves into a column, triggers fire automatically:

### Trigger Types
- AUTO_ASSIGN: Assign task to specified user
- WEBHOOK: POST to external URL with template variables
- AI_CREATE_TASK: Generate follow-up task via Gemini
- SEND_EMAIL: Queue email notification
- MOVE_TO_BOARD: Transfer to another board

The Skills System

Skills are composable expertise. Each skill encapsulates best practices that would take years to internalize. The key insight: instead of one AI that does everything okay, use specialized modes for different task types.

brainstorming

Explores requirements, edge cases, and alternatives before committing to an approach.

writing-plans

Creates detailed implementation plans with step-by-step tasks, dependencies, and acceptance criteria.

subagent-dev

Spawns parallel sub-agents for independent tasks, dramatically accelerating modular development.

code-review

Reviews changes against the plan and coding standards, catching issues before production.

The Art of Prompting

AI is only as good as its instructions. CLAUDE.md serves as living documentation, configuration that the AI reads and follows, encoding institutional wisdom that prevents repeated mistakes.

△ Vague Prompt

"Add a feature to sync with HubSpot"

No context about sync direction, data types, conflict resolution, or error handling.

✓ Structured Prompt

Add bidirectional HubSpot sync
per PLAN.md section 4.2:
- Pull contacts/deals on board load
- Push task movements as lifecycle
  stage updates
- Use optimistic locking for
  conflict resolution

References the plan, specifies behavior, defines error handling.

The test hierarchy became the backbone of velocity. Import tests run in under a second and catch 80% of issues. Smoke tests catch runtime problems. Feature tests are the final gate before merging to main.

Gated CI Pipeline

Every CommitImport Tests + Smoke TestsMust pass to commit. Catches syntax errors and runtime issues. Fast feedback under 15 seconds.

PR MergeFeature Tests RequiredFull test suite must pass before merging to main. Protects production from regressions.

System Architecture

The heart of the application is Django LiveView. We write Python, not JavaScript. The server maintains authoritative state, and all clients receive updates through WebSocket broadcasts.

Real-Time Collaboration Flow

User 1→Move task to 'Done'→WebSocket

WebSocket→board→move_task→LiveView

LiveView→UPDATE task + execute triggers→PostgreSQL

LiveView→Render DOM + broadcast→All Clients

Technology Stack

Backend

Django 5.0+ · Daphne ASGI · Celery + Redis

Database

PostgreSQL 15 · Redis caching

Real-Time

Django LiveView and WebSockets

Frontend

Stimulus.js, Tailwind CSS, and Chart.js

AI

LangChain, Gemini, and HubSpot API

Deploy

Kubernetes, ArgoCD, and GitHub Actions

The Results

Building with AI assistance is not marginally faster. It is categorically different.

DaysNot months

80%Fewer rewrites

60%+Cost savings

ProdReady from day one

Development Timeline

Phase	Traditional	With AI
Planning & Architecture	2-3 weeks	Hours
Core Board Functionality	4-6 weeks	Days
CRM Integration	3-4 weeks	Accelerated
AI Features	4-6 weeks	Parallel Dev

Where AI Falls Short

AI-assisted development is not magic. Understanding the limitations is essential to using the technology effectively.

△AI Doesn't Understand Business Context

AI can write code that compiles, but it does not inherently understand why your business needs specific workflows.

✓ Document business logic extensively in PLAN.md. The AI follows instructions; you provide the domain expertise.

△Hallucination and Drift

Without guardrails, AI can confidently implement the wrong thing. It may invent API endpoints that do not exist.

✓ CLAUDE.md prevents drift. Test-first development catches hallucinations before they become bugs.

△Security Requires Human Judgment

AI can implement authentication patterns, but determining data access requires understanding your threat model.

✓ Security patterns are designed by humans, encoded in PLAN.md, and verified through code review.

△Maintenance Is Still Human Work

AI accelerates development, but production systems still need monitoring, debugging, and incident response.

✓ Build observability from day one. AI helps write the monitoring; humans interpret the alerts.

Key Lessons

✧Documentation Is Configuration

Your CLAUDE.md becomes institutional memory. Every bug fixed becomes a rule the AI will follow forever.

✧ Invest in documentation upfront. It pays dividends as the AI learns your preferences.

✧Test Hierarchy Matters

Import tests (under 1 second) catch 80% of typos. Smoke tests catch runtime issues. Feature tests are insurance.

✧ Fast tests on every change plus comprehensive tests as safety net equals maximum velocity.

✧Plans Beat Improvisation

A 1,600-line architectural plan seemed like overkill. It was not. No drift, no 'I thought you meant...' moments.

✧ The plan is the contract. Front-load the thinking to accelerate the building.

✧Skills Enable Specialization

Instead of one AI doing everything okay, use modes: brainstorming, planning, implementation, review.

✧ Separation of concerns applies to AI just as it does to code architecture.

“The barrier to entry for software is collapsing. Your competitor is not the team that can afford more engineers. It is the team that can direct AI systems most effectively.”

AI is a force multiplier, not a replacement for engineering judgment. The teams that succeed are those that invest in upfront planning, living guardrails, test-first discipline, and human oversight for security, architecture, and business decisions.

The moat is not code.
It is understanding.

Ready to Build Faster?

Whether you are evaluating build vs. buy, planning a custom AI solution, or looking to accelerate your development timeline, we can help you execute with precision.

▣ Schedule a ConsultationFree 30-minute strategy call · No commitment

Building a Real-TimeCollaborative Toolwith AI.