Sketch - Real-time Collaborative Whiteboard Demo-Video

A modern, real-time collaborative whiteboard application built with Next.js, WebSockets, and Prisma

✨ Features

• 🎨 Real-time Collaborative Drawing - Multiple users can draw simultaneously with instant synchronization
• 🏠 Room-based Sessions - Create and join dedicated collaboration spaces
• 🔐 Secure Authentication - Google OAuth integration with session management
• 📱 Responsive Design - Optimized for desktop, tablet, and mobile devices
• 🚀 High Performance - Built with modern web technologies for optimal speed
• 🎯 Intuitive Interface - Clean, user-friendly design inspired by industry standards

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• WebSocket Client - Real-time communication

Backend

• Node.js - JavaScript runtime
• WebSocket Server - Live collaboration engine
• Better Auth - Modern authentication solution

Database & Infrastructure

• Prisma ORM - Type-safe database client
• PostgreSQL - Robust relational database
• Turborepo - High-performance build system

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• PostgreSQL database

Installation

1. Clone the repository

   git clone https://github.com/0x4nud33p/sketch.git
   cd sketch

2. Install dependencies

   pnpm install

3. Environment setup

   Copy the example environment files and configure them:

   # Web application
   cp apps/web/.env.example apps/web/.env.local
   
   # WebSocket backend
   cp apps/ws-backend/.env.example apps/ws-backend/.env
   
   # Database
   cp packages/db/.env.example packages/db/.env

4. Configure environment variables

   apps/web/.env.local

   NEXT_WS_URL=ws://localhost:8080
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   BETTER_AUTH_SECRET=your_secure_random_string
   BETTER_AUTH_URL=http://localhost:3000

   packages/db/.env

   DATABASE_URL="postgresql://username:password@localhost:5432/sketch_db"

5. Database setup

   pnpm db:push

6. Start development servers

   # Terminal 1 - Start the web application
   pnpm dev:web
   
   # Terminal 2 - Start the WebSocket server
   pnpm dev:ws

7. Open your browser

   Navigate to http://localhost:3000 to start collaborating!

🧪 Development

Available Scripts

# Development
pnpm dev:web          # Start web application
pnpm dev:ws           # Start WebSocket server
pnpm dev              # Start all services

# Database
pnpm db:push          # Push schema changes
pnpm db:studio        # Open Prisma Studio
pnpm db:generate      # Generate Prisma client

# Building
pnpm build            # Build all packages
pnpm build:web        # Build web application only

# Linting & Formatting
pnpm lint             # Run ESLint
pnpm lint:fix         # Fix ESLint issues
pnpm type-check       # Run TypeScript checks

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and commit: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

---

🌟 Star this repo • 🍴 Fork it • 📱 Try the demo

Made with ❤️ by Anudeep Avula