Scribble - Real-time Collaborative Drawing Application

Scribble is a real-time collaborative drawing application. Users can join drawing rooms and work together on the same canvas, customizing stroke color, stroke width, and dash spacing. The application includes features like undo, save actions, toast notifications, and light/dark theme support. It is built with Next.js for the frontend, Express.js for the backend, and uses Socket.io for real-time communication. TailwindCSS is used for styling, and Zustand for state management.

Features

• color picker
• customizable stroke color, stroke width, and dash gap
• undo, save actions
• toast notifications
• light/dark theme

Tech Stacks

• Next.js
• TailwindCSS
• shadcn ui
• React Hook Form
• Zod
• Zustand
• Express.js
• Socket.io

Getting Started

Run this command in the root folder.

pnpm dev

or

Change the directory into each folder and run.

cd server
pnpm dev

cd client
pnpm dev

You can now play around with it.