Collab Canvas E2E

A real-time collaborative canvas application where multiple users can draw, create shapes, and collaborate together in shared workspaces. Built as a scalable monorepo with real-time synchronization capabilities.

Tech Stack

Language

• TypeScript - Type-safe development across the entire stack

Framework

• Next.js 15 - React framework for the frontend with App Router
• Express.js - Backend REST API server
• WebSocket - Real-time bidirectional communication

Libraries

• React 19 - UI library
• Prisma 6 - Database ORM and schema management
• GSAP - Animation library with ScrollTrigger
• Tailwind CSS - Utility-first CSS framework
• Zod - Schema validation
• shadcn/ui - Re-usable UI components
• Lucide React - Icon library

Tools

• TurboRepo - Monorepo build system
• pnpm - Fast, disk space efficient package manager
• ESLint - Code linting
• Prettier - Code formatting

Features

• Real-time Collaboration - Multiple users can work on the same canvas simultaneously
• Drawing Tools - Create and manipulate shapes with various tools
• User Authentication - Secure login and registration system
• Room Management - Create and join collaborative workspaces
• Responsive Design - Smooth scrolling and optimized for all screen sizes
• Type-safe - End-to-end type safety with TypeScript and Zod
• Shared Component Library - Reusable UI components across the monorepo

Setup

Prerequisites

• Node.js 18 or higher
• pnpm 9.0 or higher
• PostgreSQL database

Installation

1. Clone the repository

git clone https://github.com/OmkarSathish/collab-canvas-e2e.git
cd collab-canvas-e2e

2. Install dependencies

pnpm install

3. Generate Prisma client

cd packages/db
pnpm run db:generate

4. Set up environment variables

# Create .env files in apps/http, apps/ws, and apps/web
# Add DATABASE_URL and other required environment variables

5. Start development servers

pnpm dev

The application will be available at:

• Frontend: http://localhost:3000
• REST API: http://localhost:3001
• WebSocket server: Check ws app configuration

Project Structure

collab-canvas-e2e/
├── apps/
│   ├── http/          # REST API server
│   ├── web/           # Next.js frontend
│   └── ws/            # WebSocket server
└── packages/
    ├── common/        # Shared types and validators
    ├── common-backend/# Backend utilities
    ├── db/            # Prisma schema and client
    ├── eslint-config/ # ESLint configuration
    ├── typescript-config/ # TypeScript configuration
    └── ui/            # Shared React components

Available Scripts

pnpm dev          # Start all apps in development
pnpm build        # Build all apps and packages
pnpm lint         # Run ESLint
pnpm format       # Format code with Prettier
pnpm format:check # Check code formatting
pnpm check-types  # Run TypeScript type checking

License

MIT