Code Canva is a collaborative coding workspace designed for teams to build, review, and run code together in a browser-based environment. The project combines a modern Next.js frontend with AI-powered coding assistance, collaborative editing patterns, and a scalable backend architecture for multi-user workspaces.
This application aims to provide:
- Collaborative code editing with real-time workspace awareness
- Team-based project organization and permission management
- AI-powered code completion, explanation, and execution support
- A developer-friendly interface inspired by modern coding platforms
- Flexible data models for workspaces, files, comments, presence, and version history
┌───────────────────────┐
│ USERS │
│ │
│ Browser A Browser B │
└───────────┬───────────┘
│
HTTPS / WebSocket
│
▼
┌─────────────────────────────────────┐
│ NEXT.JS FRONTEND │
│ │
│ ┌──────────┐ ┌───────────────┐ │
│ │Monaco │ │File Explorer │ │
│ │Editor │ │Workspace UI │ │
│ └──────────┘ └───────────────┘ │
│ │
│ Chat │ Video │ Terminal │ Presence │
└───────────────┬─────────────────────┘
│
┌──────────┴──────────┐
│ │
REST WebSocket
HTTP Socket.IO
│ │
▼ ▼
┌─────────────────────────────────────────┐
│ Next.JS SERVER │
│ │
│ ┌────────────────────────────────────┐ │
│ │ MIDDLEWARE LAYER │ │
│ │ │ │
│ │ Auth │ CORS │ Rate Limit │ Zod │ │
│ │ Error Handler │ Logger │ RBAC │ │
│ └──────────────────┬─────────────────┘ │
│ │ │
│ ┌──────────────────▼─────────────────┐ │
│ │ API ROUTES │ │
│ │ │ │
│ │ /auth │ │
│ │ /users │ │
│ │ /workspaces │ │
│ │ /files │ │
│ │ /comments │ │
│ │ /versions │ │
│ │ /execution │ │
│ └──────────────────┬─────────────────┘ │
│ │ │
│ ┌──────────────────▼─────────────────┐ │
│ │ CONTROLLERS │ │
│ │ │ │
│ │ AuthController │ │
│ │ WorkspaceController │ │
│ │ FileController │ │
│ │ ExecutionController │ │
│ └──────────────────┬─────────────────┘ │
│ │ │
│ ┌──────────────────▼─────────────────┐ │
│ │ SERVICES │ │
│ │ │ │
│ │ AuthService │ │
│ │ WorkspaceService │ │
│ │ FileService │ │
│ │ CollaborationService │ │
│ │ ExecutionService │ │
│ │ VersionService │ │
│ └───────────────┬────────────────────┘ │
│ │ │
│ ┌───────────────▼────────────────────┐ │
│ │ SOCKET.IO LAYER │ │
│ │ │ │
│ │ workspace:join │ │
│ │ editor:update │ │
│ │ cursor:update │ │
│ │ presence:update │ │
│ │ chat:message │ │
│ │ video:signal │ │
│ └───────────────┬────────────────────┘ │
└──────────────────┼──────────────────────┘
│
┌──────────────────┼────────────────────────┐
│ │ │
▼ ▼ ▼
┌───────────────┐ ┌────────────────┐ ┌───────────────┐
│ PostgreSQL │ │ Redis │ │ Object Store │
│ │ │ │ │ S3 │
│ Users │ │ Presence │ │ │
│ Workspaces │ │ Pub/Sub │ │ Project files │
│ Members │ │ Socket adapter │ │ Assets │
│ Files │ │ Sessions │ │ Snapshots │
│ Versions │ │ Rate limiting │ │ │
│ Messages │ │ │ └───────────────┘
└───────────────┘ └────────────────┘
│
│
▼
┌────────────────────────┐
│ COLLABORATION ENGINE │
│ │
│ Yjs / CRDT │
│ │
│ Shared Documents │
│ Conflict Resolution │
│ Document Sync │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ EXECUTION SERVICE │
│ │
│ Queue / Worker │
│ │
│ Docker │
│ ┌──────────────┐ │
│ │ Java │ │
│ │ JavaScript │ │
│ │ Python │ │
│ │ C/C++ │ │
│ └──────────────┘ │
│ │
│ CPU / RAM / Timeout │
│ Isolation │
└────────────────────────┘
code-canva/
├── README.md # Project overview, setup steps, and architecture docs
├── components.json # shadcn/ui configuration and component registry
├── docs/ # Design notes and product blueprint
│ └── blueprint.md # Product/feature blueprint and architecture ideas
├── prisma/ # Database and Prisma-related files
│ ├── schema.prisma # Prisma schema for application data models
│ └── migrations/ # SQL migration history for the database
│ └── ...
├── public/ # Static assets served by Next.js (images, icons, etc.)
├── src/ # Main application source code
│ ├── ai/ # AI assistant features and Genkit flow logic
│ │ ├── dev.ts # Local AI/dev tooling setup
│ │ ├── genkit.ts # Genkit configuration and initialization
│ │ └── flows/ # AI workflows for coding assistance
│ │ ├── code-completion-suggestions.ts # Suggests code completions
│ │ ├── code-execution.ts # Runs or prepares code execution logic
│ │ └── code-explanation-on-hover.ts # Explains code when hovered over
│ ├── app/ # Next.js App Router pages and API routes
│ │ ├── api/ # Server-side API endpoints
│ │ │ ├── invites/ # Invite flows and invitations API
│ │ │ ├── teams/ # Team-related API routes
│ │ │ └── webhooks/ # Webhook handlers for external events
│ │ ├── canvas/ # Collaborative coding workspace page
│ │ │ ├── layout.tsx # Canvas-specific layout wrapper
│ │ │ └── page.tsx # Main editor/canvas experience
│ │ ├── contact/ # Public contact page
│ │ │ └── page.tsx # Contact page UI
│ │ ├── globals.css # Global styling and theme layers
│ │ ├── layout.tsx # Root app layout and shell
│ │ ├── page.tsx # Landing/home page
│ │ └── teams/ # Team management and team pages
│ │ ├── create/ # Team creation flow
│ │ └── [teamId]/ # Team-specific dashboard/page routes
│ ├── components/ # Reusable UI components for the app
│ │ ├── editor/ # Editor-related UI components
│ │ │ └── code-editor.tsx # Monaco-based code editor component
│ │ ├── Footer/ # Footer UI section
│ │ │ └── Footer.tsx # Website footer markup
│ │ ├── HeroSection/ # Marketing/landing banner section
│ │ │ └── HeroSection.tsx # Hero section UI
│ │ ├── OurServices/ # Services/features section
│ │ │ └── OurServices.tsx # Services display component
│ │ ├── Roadmap/ # Product roadmap UI
│ │ │ └── Roadmap.tsx # Roadmap timeline section
│ │ ├── Testimonals/ # Testimonial section
│ │ │ └── Testimonials.tsx # Customer testimonial cards
│ │ ├── layout/ # App shell: header, sidebar, nav
│ │ │ ├── app-header-content.tsx # Header content area logic
│ │ │ ├── app-sidebar.tsx # Main sidebar navigation
│ │ │ ├── header.tsx # Top header component
│ │ │ ├── NavbarWrapper.tsx # Navbar wrapper for layout behavior
│ │ │ └── user-nav.tsx # User profile menu and actions
│ │ ├── notifications/ # Notification center UI
│ │ │ └── notification-center.tsx # In-app notifications panel
│ │ ├── ui/ # Reusable shadcn/ui primitives
│ │ │ └── ...shadcn/ui components # Buttons, cards, dialogs, inputs, etc.
│ │ ├── logo.tsx # Brand/logo component
│ │ ├── theme-provider.tsx # Theme context for Dark/Light mode
│ │ └── theme-toggle.tsx # Theme switch control
│ ├── generated/ # Generated Prisma client files
│ │ └── prisma/ # Auto-generated Prisma models and types
│ │ └── ...generated Prisma client files
│ ├── hooks/ # Reusable React hooks
│ │ ├── use-mobile.tsx # Detects mobile viewport state
│ │ └── use-toast.ts # Toast notification helper hook
│ ├── lib/ # Shared utilities and app libraries
│ │ ├── placeholder-images.json # Placeholder media dataset
│ │ ├── prisma.ts # Prisma client singleton
│ │ └── utils.ts # Common helper functions
│ ├── middleware.ts # Next.js middleware logic (auth, routing, security)
│ ├── proxy.ts # Proxy layer or request forwarding logic
│ └── schemaValidation/ # Input validation schemas
│ └── authSchemaValidation.ts # Validation rules for auth-related requests
├── next-env.d.ts # Next.js TypeScript environment declarations
├── next.config.ts # Next.js framework configuration
├── package.json # Project scripts and dependencies
├── postcss.config.mjs # PostCSS processing configuration
├── prisma.config.ts # Prisma runtime configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript compiler settings
├── .gitignore # Git ignore rules
└── .env.example or .env.local # Environment variables (if present in your setup)
- Next.js with App Router
- TypeScript
- Tailwind CSS
- Prisma ORM
- PostgreSQL
- Monaco Editor
- Genkit AI flows
- shadcn/ui component library
- Clerk for authentication workflows
- Redis for real-time collaboration support
The database is designed around shared workspaces, collaborative files, users, presence, messages, and version tracking.
users (
id UUID PRIMARY KEY,
username TEXT UNIQUE NOT NULL,
email TEXT UNIQUE NOT NULL,
password_hash TEXT,
avatar_url TEXT,
created_at TIMESTAMP DEFAULT now()
)
workspaces (
id UUID PRIMARY KEY,
name TEXT NOT NULL,
owner_id UUID REFERENCES users(id),
is_public BOOLEAN DEFAULT false,
created_at TIMESTAMP DEFAULT now()
)
workspace_members (
workspace_id UUID REFERENCES workspaces(id),
user_id UUID REFERENCES users(id),
role TEXT CHECK (role IN ('owner', 'editor', 'viewer')),
joined_at TIMESTAMP DEFAULT now(),
PRIMARY KEY (workspace_id, user_id)
)
nodes (
id UUID PRIMARY KEY,
workspace_id UUID REFERENCES workspaces(id),
parent_id UUID REFERENCES nodes(id),
name TEXT NOT NULL,
type TEXT CHECK (type IN ('file', 'folder')),
language TEXT,
created_by UUID REFERENCES users(id),
created_at TIMESTAMP DEFAULT now()
)
file_documents (
file_id UUID PRIMARY KEY REFERENCES nodes(id),
content TEXT,
crdt_state BYTEA,
updated_at TIMESTAMP DEFAULT now()
)
file_versions (
id UUID PRIMARY KEY,
file_id UUID REFERENCES nodes(id),
content TEXT,
created_by UUID REFERENCES users(id),
created_at TIMESTAMP DEFAULT now()
)
workspace_presence (
workspace_id UUID,
user_id UUID,
status TEXT,
cursor_position JSONB,
last_seen TIMESTAMP,
PRIMARY KEY (workspace_id, user_id)
)
comments (
id UUID PRIMARY KEY,
file_id UUID REFERENCES nodes(id),
user_id UUID REFERENCES users(id),
content TEXT,
line_number INT,
created_at TIMESTAMP DEFAULT now()
)
workspace_messages (
id UUID PRIMARY KEY,
workspace_id UUID REFERENCES workspaces(id),
user_id UUID REFERENCES users(id),
content TEXT,
created_at TIMESTAMP DEFAULT now()
)usersstores account and profile information.workspacesrepresents a collaborative project space.workspace_membersmanages access and permissions for each user in a workspace.nodessupports file and folder hierarchy inside a workspace.file_documentskeeps the live document state and snapshot content.file_versionsstores change history for revisions and auditing.workspace_presencetracks online status and editor cursor state.commentsadds contextual feedback tied to a file and line number.workspace_messagesstores team chat messages within a workspace.
Install dependencies:
npm installGenerate Prisma client and prepare the database:
npx prisma generateRun the development server:
npm run devThe app will be available locally through the configured Next.js port.
Code Canva is intended to become a browser-based collaborative coding platform with features similar to a modern remote IDE, including:
- multi-user editing
- workspace-level collaboration
- AI support for coding tasks
- version history and file snapshots
- execution environments for code compilation and testing
This repository is currently structured as a modern Next.js application foundation for collaborative coding workflows. Additional backend services, real-time collaboration infrastructure, execution workers, and production deployment configuration can be layered on top of the existing front-end and Prisma foundation.