ColabPen - Real-time Collaborative Drawing Application

ColabPen is a real-time collaborative drawing application featuring synchronized drawing, user rooms, and a sleek modern interface. Built with a React/Vite frontend and a Node.js/Express backend powered by Socket.io, this application provides a seamless, real-time whiteboarding experience.

Project Structure

This is a monorepo setup containing both the frontend and backend of the application:

• /client - The React frontend powered by Vite and TypeScript.
• /server - The Node.js Express backend using Socket.io and Prisma (with Neon PostgreSQL).

Features

• Real-time Collaboration: Draw and erase synchronously with other users using Socket.io.
• Room Management: Join specific rooms to securely collaborate with invited participants.
• Modern UI: Built with Tailwind CSS and Framer Motion for responsive and dynamic visual feedback.
• Persistent Storage: Drawings and session data are stored in a Neon PostgreSQL database via Prisma ORM.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• A Neon PostgreSQL database (or local PostgreSQL)

Getting Started

1. Clone the repository
2. See the client and server directories for individual setup instructions:
   • Client Setup Guide
   • Server Setup Guide

Starting the Full Stack

It's recommended to run both client and server concurrently during development. Open two terminals:

Terminal 1 (Server):

cd server
npm install
npm run dev

Terminal 2 (Client):

cd client
npm install
npm run dev