A modern collaborative drawing platform built with Next.js and WebSocket technology.

🎨 Real-time drawing collaboration: Multiple users can draw on the same canvas simultaneously, seeing each other's strokes in real-time.

🔄 Live canvas synchronization: All drawing actions and canvas manipulations are instantly synchronized across all connected clients.

🛠️ Drawing tools:

• Rectangle: Draw rectangular shapes.
• Circle: Draw circular shapes.
• Line: Draw straight lines.
• Freehand drawing: Draw freeform paths.

🖐️ Canvas controls:

• Pan: Move the visible area of the canvas.
• Zoom: Adjust the magnification level of the canvas.
• Reset view: Return the canvas to its default zoom and pan.

🔐 Secure authentication: Ensures only authorized users can access and participate in drawing sessions.

🏠 Drawing rooms: Organize collaboration within dedicated virtual rooms.

🌙 Dark theme: Offers a visually comfortable dark mode for extended use.

Frontend

• Next.js 14
• TypeScript
• Tailwind CSS
• Custom UI components
• Canvas API

Backend

• Node.js
• WebSocket server (built with Node.js)
• Prisma ORM
• PostgreSQL database

Development

• Turborepo
• pnpm package manager
• Vercel deployment

• Node.js 18 or higher
• pnpm package manager
• PostgreSQL database

1. Clone the repository:

   git clone <repository_url>
   cd <repository_name>

2. Install dependencies:

   pnpm install

3. Configure environment variables:

   Create .env files in the specified directories and set the following variables:

   apps/web/.env

   NEXT_PUBLIC_BACKEND_URL=http://localhost:5000/api/v1
   

   apps/http-backend/.env

   DATABASE_URL=postgresql://<user>:<password>@<host>:<port>/<database>
   JWT_SECRET=your-secret-key
   

   apps/ws-backend/.env

   DATABASE_URL=postgresql://<user>:<password>@<host>:<port>/<database>
   JWT_SECRET=your-secret-key
   

   Note: Replace the placeholder values (e.g., <user>, <password>, <host>, <port>, <database>, your-secret-key) with your actual PostgreSQL database credentials and a strong secret key for JWT.

4. Set up the database:

   cd apps/http-backend
   pnpm prisma generate
   pnpm prisma db push

5. Start development servers:

   pnpm dev

   This command will start the frontend, HTTP backend, and WebSocket backend concurrently. You can usually access the frontend at http://localhost:3000.

apps/ ├── chat-web/ # chat app no need to worry about this ├── drawapp-fe/ # Website main frontend part ├── http-backend/ # http backend server └── ws-backend/ #websocket server

packages/ ├── ui/ # Shared UI components ├── db/ # Prisma database client └── common/ # Shared utility functions and types

Contributions are welcome! Please follow these steps:

1. Fork the repository on GitHub.
2. Create a feature branch with a descriptive name:

   git checkout -b feature/new-tool

3. Commit your changes with a clear and concise message:

   git commit -m 'Add new drawing tool'

4. Push your branch to your forked repository:

   git push origin feature/new-tool

5. Open a Pull Request on the main repository.