🎨 Sketchly

A production-ready collaborative whiteboard application with real-time drawing, AI-powered shape generation, and enterprise-grade infrastructure

Live Demo • Features • Architecture • Installation

DEMO VIDEO:

SKETCHLY-APP.webm

📖 About

Sketchly is a production-ready collaborative whiteboard application inspired by Excalidraw and Tldraw, built with modern web technologies and enterprise-grade architecture. It enables teams to draw, sketch, and brainstorm together in real-time with AI-powered assistance.

🎉 Project Status: COMPLETED - This project is fully functional and deployed to production!

Perfect for:

🧠 Brainstorming Sessions - Collaborate with your team in real-time
📊 Visual Planning - Create diagrams and flowcharts effortlessly
👥 Remote Collaboration - Work together from anywhere in the world
🎓 Online Teaching - Interactive whiteboard for educators
🎨 Creative Ideation - Sketch ideas with AI assistance

✨ Features

🚀 Core Features (Completed)

Drawing & Canvas

✏️ Advanced Drawing Tools - Freehand pen, shapes (rectangles, circles, lines, arrows)
🎨 Rich Color Palette - Comprehensive color picker with custom colors
🔍 Zoom Controls - Precise zoom in/out for detailed work
📐 Shape Tools - Pre-built geometric shapes and connectors

Real-time Collaboration

⚡ Live Multi-user Editing - See changes from other users instantly
🔌 WebSocket Integration - Dedicated WebSocket server for real-time sync
👥 Authenticated Collaboration - Only signed-in users can collaborate
🚀 Optimized Performance - Redis caching for lightning-fast updates

AI-Powered Features

🤖 AI Shape Generation - LangChain integration for intelligent shape creation
🎯 Natural Language Processing - Draw shapes using text descriptions
🧠 Smart Suggestions - AI-assisted drawing recommendations

Authentication & Security

🔐 Better Auth Integration - Modern, secure authentication system
📧 Email/Password Authentication - Traditional login method
🌐 OAuth Support - Google and GitHub single sign-on
🛡️ Session Management - Secure user sessions with automatic refresh

Data Persistence

💾 PostgreSQL Database - Production-grade relational database
🔄 Prisma ORM - Type-safe database queries and migrations
⚡ Redis Caching - Fast data retrieval and real-time sync
📊 Automatic Saving - All drawings saved automatically

Modern Architecture

📱 Responsive Design - Seamless experience across all devices
🎯 Server Actions - Next.js server actions instead of traditional HTTP endpoints
🏗️ Monorepo Structure - Turborepo for efficient code organization
🎨 ShadCN/UI Components - Beautiful, accessible UI library

DevOps & Deployment

🐳 Docker Support - Complete containerization with Docker Compose
🔄 CI/CD Pipeline - Automated testing and deployment
📦 Docker Hub Integration - Automated image builds and publishing
☁️ Vercel Deployment - Production deployment on Vercel
🚀 Zero-Downtime Deploys - Continuous deployment with rollback support

🏗️ Architecture

Turborepo Monorepo Structure

Sketchly/
├── apps/
│   ├── web/                    # Next.js Frontend Application
│   │   ├── src/
│   │   │   ├── app/           # Next.js App Router
│   │   │   ├── components/    # React Components (ShadCN/UI)
│   │   │   ├── lib/           # Utilities & Helpers
│   │   │   └── actions/       # Server Actions
│   │────── Dockerfiles
│   │
│   └── websocket/              # WebSocket Server Layer
│       ├── src/
│       │   ├── handlers/      # WebSocket event handlers
│       │   ├── redis/         # Redis client configuration
│       │   └── db/            # Database integration
│
├── packages/
│   ├── database/              # Prisma ORM Package
│   │   ├── prisma/
│   │   │   ├── schema.prisma  # Database schema
│   │   │   └── migrations/    # Database migrations
│   │   └── src/               # Prisma client exports
│   │
│   ├── ui/                    # Shared UI Components (ShadCN)
│   │   └── components/        # Reusable components
│   │
│   ├── typescript-config/     # Shared TypeScript configs
│   └── eslint-config/         # Shared ESLint configs
│
├── .github/
│   └── workflows/             # CI/CD Pipeline
│       ├── build.yml          # Build and test
│       ├── deploy.yml         # Deploy to Vercel
│       └── docker.yml         # Build and push Docker images
│
├── docker-compose.yml         # Multi-container orchestration
├── turbo.json                 # Turborepo configuration
├── pnpm-workspace.yaml        # pnpm workspace setup
└── README.md

Technology Stack

Frontend Layer (apps/web)

Next.js 15 - React framework with App Router
TypeScript - Type-safe development
TailwindCSS - Utility-first styling
ShadCN/UI - Beautiful component library
React - UI rendering library
Server Actions - Type-safe server mutations

WebSocket Layer (apps/websocket)

WebSocket - Real-time bidirectional communication
Node.js - JavaScript runtime
Redis - In-memory data store for caching

Database & ORM

PostgreSQL 15+ - Production database
Prisma ORM - Type-safe database client
Redis - Caching and real-time data sync

AI & Machine Learning

LangChain - AI orchestration framework
LLM Integration - Natural language shape generation

Authentication

Better Auth - Modern authentication solution
OAuth Providers - Google, GitHub integration
Email/Password - Traditional authentication

DevOps & Infrastructure

Docker - Containerization platform
Docker Compose - Multi-container orchestration
GitHub Actions - CI/CD automation
Vercel - Frontend deployment platform
Docker Hub - Container registry

Monorepo Tools

Turborepo - High-performance build system
pnpm - Fast, disk-efficient package manager

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Node.js (v18 or higher)
pnpm (v8 or higher)
Docker and Docker Compose
Git

Quick Start with Docker Compose (Recommended)

The fastest way to get Sketchly running locally:

1️⃣ Clone the Repository

git clone https://github.com/Tejas-pr/Sketchly.git
cd Sketchly

2️⃣ Set Up Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://postgres:postgres@postgres:5432/sketchly?schema=public"

# Redis
REDIS_URL="redis://redis:6379"

# Authentication (Better Auth)
BETTER_AUTH_SECRET="your-secret-key-here-min-32-chars"
BETTER_AUTH_URL="http://localhost:3000"

# OAuth Providers
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# AI / LangChain
GOOGLE_API_KEY="your-openai-api-key"  # Optional: For AI features

# Environment
NODE_ENV="development"

3️⃣ Start All Services

# Build and start all containers
docker-compose up --build

# Or run in detached mode
docker-compose up -d

This single command starts:

✅ PostgreSQL database
✅ Redis cache
✅ Next.js web application
✅ WebSocket server

4️⃣ Access the Application

Web App: http://localhost:3000
WebSocket: ws://localhost:8080
Database: localhost:5432
Redis: localhost:6379

Manual Development Setup

If you prefer to run services individually:

1️⃣ Install Dependencies

pnpm install

2️⃣ Start Database & Redis

# Start PostgreSQL
docker run -d \
  --name sketchly-postgres \
  -e POSTGRES_USER=postgres \
  -e POSTGRES_PASSWORD=postgres \
  -e POSTGRES_DB=sketchly \
  -p 5432:5432 \
  postgres:15

# Start Redis
docker run -d \
  --name sketchly-redis \
  -p 6379:6379 \
  redis:7-alpine

3️⃣ Run Database Migrations

pnpm --filter=database prisma:generate
pnpm --filter=database prisma:migrate

4️⃣ Start Development Servers

# Start all apps (web + websocket)
pnpm dev

# Or start individually
pnpm dev --filter=web          # Web app on :3000
pnpm dev --filter=websocket    # WebSocket on :8080

🐳 Docker Commands

Docker Compose Commands

# Start all services
docker-compose up

# Start in background
docker-compose up -d

# Stop all services
docker-compose down

# Stop and remove volumes (deletes data)
docker-compose down -v

# View logs
docker-compose logs -f

# View logs for specific service
docker-compose logs -f web
docker-compose logs -f websocket

# Rebuild containers
docker-compose build

# Restart a specific service
docker-compose restart web

Individual Container Commands

# List running containers
docker ps

# Stop a container
docker stop sketchly-postgres
docker stop sketchly-redis

# Start a stopped container
docker start sketchly-postgres

# View container logs
docker logs sketchly-postgres -f

# Access container shell
docker exec -it sketchly-postgres psql -U postgres -d sketchly
docker exec -it sketchly-redis redis-cli

# Remove containers
docker rm -f sketchly-postgres sketchly-redis

🔧 Available Scripts

Monorepo Commands

# Development - runs all apps
pnpm dev

# Build all apps
pnpm build

# Production start
pnpm start

# Lint all code
pnpm lint

# Format code
pnpm format

# Run tests
pnpm test

# Clean build artifacts
pnpm clean

Workspace-Specific Commands

# Web app only
pnpm dev --filter=web
pnpm build --filter=web

# WebSocket server only
pnpm dev --filter=websocket
pnpm build --filter=websocket

# Database commands
pnpm --filter=database prisma:generate
pnpm --filter=database prisma:migrate
pnpm --filter=database prisma:studio
pnpm --filter=database prisma:seed

Docker Build Commands

# Build web app image
docker build -t sketchly-web ./apps/web

# Build websocket image
docker build -t sketchly-websocket ./apps/websocket

# Build all with docker-compose
docker-compose build

🔄 CI/CD Pipeline

Sketchly uses GitHub Actions for automated CI/CD:

Automated Workflows

Build & Test (.github/workflows/web.yml)
- Runs on every push and PR
- Installs dependencies with pnpm
- Runs linting and type checking
- Builds all apps and packages
- Runs test suites

Docker Hub Repository

Pre-built images are available on Docker Hub:

# Pull latest images
docker pull tejaspr/sketchly-web:latest

# Run from Docker Hub
docker run -p 3000:3000 tejaspr/sketchly-web:latest

🎨 Using Sketchly

Basic Drawing

Select a Tool - Choose from pen, shapes, or text tools
Pick a Color - Use the color picker to customize
Draw on Canvas - Click and drag to create
Pan & Zoom - Use mouse wheel to zoom, drag to pan

Real-time Collaboration

Sign In - Authenticate with email, Google, or GitHub
Share Canvas - Share the URL with collaborators
Collaborate - See real-time updates from other users
Auto-save - All changes saved automatically

AI Shape Generation

Activate AI Tool - Click the AI assistant button
Describe Shape - Type natural language description
- Example: "Create a flowchart with 3 connected boxes"
- Example: "Draw a circle connected to a square with an arrow"
Generate - AI creates shapes based on your description
Refine - Adjust and customize the generated shapes

🔐 Authentication Setup

Better Auth Configuration

Better Auth is configured in apps/web/lib/auth.ts. The system supports:

Email/Password - Traditional authentication
Google OAuth - Single sign-on with Google
GitHub OAuth - Single sign-on with GitHub

Setting Up OAuth Providers

Google OAuth

Visit Google Cloud Console
Create a new project
Enable Google+ API
Create OAuth 2.0 credentials
Add authorized redirect URIs:
- Development: http://localhost:3000/api/auth/callback/google
- Production: https://yourdomain.com/api/auth/callback/google

Copy credentials to .env:

GOOGLE_CLIENT_ID="your-client-id"
GOOGLE_CLIENT_SECRET="your-client-secret"

GitHub OAuth

Go to GitHub Developer Settings
Create a new OAuth App
Set Authorization callback URL:
- Development: http://localhost:3000/api/auth/callback/github
- Production: https://yourdomain.com/api/auth/callback/github

Copy credentials to .env:

GITHUB_CLIENT_ID="your-client-id"
GITHUB_CLIENT_SECRET="your-client-secret"

📊 Database Management

Prisma Commands

# Generate Prisma Client
pnpm --filter=database prisma:generate

# Create a new migration
pnpm --filter=database prisma:migrate dev --name your_migration_name

# Apply migrations to production
pnpm --filter=database prisma:migrate deploy

# Open Prisma Studio (Database GUI)
pnpm --filter=database prisma:studio

# Reset database (caution: deletes all data)
pnpm --filter=database prisma:migrate reset

# Seed database
pnpm --filter=database prisma:seed

Database Schema

Key models in the Prisma schema:

User - User accounts and profiles
Session - User sessions for Better Auth
Canvas - Whiteboard canvases
Shape - Individual drawing elements
Collaboration - Real-time collaboration sessions

Redis Caching Strategy

Redis is used in the WebSocket layer to:

Cache active canvas data for fast access
Store real-time collaboration state
Queue shape updates before database write
Manage WebSocket connection states

🚀 Deployment

Production Deployment on Vercel

The web application is automatically deployed to Vercel via GitHub Actions:

Push to main branch → Triggers deployment
Automatic build → Next.js builds and optimizes
Database migrations → Prisma migrations applied
Live deployment → Available at production URL

Live Demo: https://sketchly.vercel.app

Self-Hosting with Docker

Using Docker Compose

# Production deployment
docker-compose -f docker-compose.prod.yml up -d

# Scale services
docker-compose up -d --scale websocket=3

Using Pre-built Images

# Pull from Docker Hub
docker pull tejaspr/sketchly-web:latest
docker pull tejaspr/sketchly-websocket:latest

# Run containers
docker run -d \
  --name sketchly-web \
  -p 3000:3000 \
  --env-file .env.production \
  tejaspr/sketchly-web:latest

docker run -d \
  --name sketchly-websocket \
  -p 8080:8080 \
  --env-file .env.production \
  tejaspr/sketchly-websocket:latest

Environment Variables for Production

# Database (Production)
DATABASE_URL="your-production-database-url"

# Redis (Production)
REDIS_URL="your-production-redis-url"

# Authentication
BETTER_AUTH_SECRET="secure-random-string-min-32-chars"
BETTER_AUTH_URL="https://yourdomain.com"

# OAuth
GOOGLE_CLIENT_ID="production-google-client-id"
GOOGLE_CLIENT_SECRET="production-google-client-secret"
GITHUB_CLIENT_ID="production-github-client-id"
GITHUB_CLIENT_SECRET="production-github-client-secret"

# AI (Optional)
OPENAI_API_KEY="your-openai-api-key"

# Environment
NODE_ENV="production"

🤝 Contributing

Contributions are welcome! Here's how you can help:

How to Contribute

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
- Follow existing code style
- Add tests for new features
- Update documentation

Commit your changes

git commit -m 'feat: add amazing feature'

Push to your fork
```
git push origin feature/amazing-feature
```
Open a Pull Request

Development Guidelines

Code Style: Follow the existing TypeScript/React patterns
Commits: Use conventional commits (feat, fix, docs, etc.)
Testing: Add tests for new functionality
Documentation: Update README and inline docs
Type Safety: Maintain strict TypeScript types

Areas for Contribution

🎨 UI/UX improvements
🐛 Bug fixes
✨ New features (shapes, tools, export options)
📚 Documentation improvements
🧪 Test coverage
🌐 Internationalization
♿ Accessibility enhancements

🐛 Bug Reports & Feature Requests

Found a bug or have an idea? Please open an issue!

For bugs, include:

Clear description of the issue
Steps to reproduce
Expected vs actual behavior
Screenshots/videos if applicable
Environment (browser, OS, etc.)

For features, include:

Clear description of the feature
Use cases and benefits
Proposed implementation (optional)
UI mockups (optional)

📚 Learn More

Documentation Resources

Turborepo Docs - Monorepo management
Next.js Docs - React framework
Prisma Docs - Database ORM
Better Auth Docs - Authentication
ShadCN/UI - UI components
LangChain Docs - AI integration
Docker Docs - Containerization
pnpm Workspaces - Package management

Project Resources

GitHub Repository - Source code
Issues - Bug reports
Discussions - Community forum
Docker Hub - Container images

📈 Performance & Scalability

Optimization Strategies

Redis Caching - Fast data retrieval and reduced database load
WebSocket Optimization - Efficient real-time communication
Server Actions - Type-safe mutations without HTTP overhead
Turborepo Caching - Fast builds with intelligent caching
Docker Compose - Easy horizontal scaling

Monitoring

Recommended monitoring tools:

Vercel Analytics - Frontend performance
Database Monitoring - Query performance
Redis Insights - Cache hit rates
WebSocket Metrics - Connection health

🔒 Security

Security is a top priority for Sketchly:

✅ Better Auth - Modern, secure authentication
✅ OAuth 2.0 - Industry-standard authorization
✅ CSRF Protection - Cross-site request forgery prevention
✅ SQL Injection Prevention - Prisma's parameterized queries
✅ Environment Variables - Sensitive data protection
✅ Rate Limiting - API abuse prevention
✅ Input Validation - Server-side validation

Reporting Security Issues: Please email security concerns privately to the maintainer.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Tejas

GitHub: @Tejas-pr
Portfolio: tejaspr.site

🙏 Acknowledgments

Special thanks to:

Excalidraw for inspiration
Vercel for hosting
Turborepo team for amazing monorepo tools
ShadCN for beautiful UI components
All contributors and supporters

🌟 Show Your Support

If you find Sketchly helpful, please:

⭐ Star this repository
🐛 Report bugs
💡 Suggest features
🤝 Contribute code
📢 Share with others

📞 Contact & Support

Have questions or suggestions?

📝 Open an issue
💬 Start a discussion

🗓️ Project Stats

Status: ✅ Production Ready
Latest Version: v1.0.0
Stars: ⭐ Give us a star!

Built with ❤️ using Next.js, Turborepo, and modern web technologies

Made by Tejas

⬆ Back to top

Name		Name	Last commit message	Last commit date
Latest commit History 114 Commits
.github/workflows		.github/workflows
.vscode		.vscode
apps		apps
docker		docker
packages		packages
.dockerignore		.dockerignore
.env.example		.env.example
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
docker-compose.yml		docker-compose.yml
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
turbo.json		turbo.json
vercel.json		vercel.json

Tejas-pr/Sketchly

Folders and files

Latest commit

History

Repository files navigation

🎨 Sketchly

DEMO VIDEO:

📖 About

Perfect for:

✨ Features

🚀 Core Features (Completed)

Drawing & Canvas

Real-time Collaboration

AI-Powered Features

Authentication & Security

Data Persistence

Modern Architecture

DevOps & Deployment

🏗️ Architecture

Turborepo Monorepo Structure

Technology Stack

Frontend Layer (apps/web)

WebSocket Layer (apps/websocket)

Database & ORM

AI & Machine Learning

Authentication

DevOps & Infrastructure

Monorepo Tools

🚀 Getting Started

Prerequisites

Quick Start with Docker Compose (Recommended)

1️⃣ Clone the Repository

2️⃣ Set Up Environment Variables

3️⃣ Start All Services

4️⃣ Access the Application

Manual Development Setup

1️⃣ Install Dependencies

2️⃣ Start Database & Redis

3️⃣ Run Database Migrations

4️⃣ Start Development Servers

🐳 Docker Commands

Docker Compose Commands

Individual Container Commands

🔧 Available Scripts

Monorepo Commands

Workspace-Specific Commands

Docker Build Commands

🔄 CI/CD Pipeline

Automated Workflows

Docker Hub Repository

🎨 Using Sketchly

Basic Drawing

Real-time Collaboration

AI Shape Generation

🔐 Authentication Setup

Better Auth Configuration

Setting Up OAuth Providers

Google OAuth

GitHub OAuth

📊 Database Management

Prisma Commands

Database Schema

Redis Caching Strategy

🚀 Deployment

Production Deployment on Vercel

Self-Hosting with Docker

Using Docker Compose

Using Pre-built Images

Environment Variables for Production

🤝 Contributing

How to Contribute

Development Guidelines

Areas for Contribution

🐛 Bug Reports & Feature Requests

📚 Learn More

Documentation Resources

Project Resources

📈 Performance & Scalability

Optimization Strategies

Monitoring

Packages