https://github.com/rajput-vinay/drawflow
🚀 DrawFlow is an interactive whiteboarding tool inspired by Excalidraw. It enables real-time drawing, collaborative editing, and seamless state management. Whether you're brainstorming ideas, diagramming workflows, or sketching wireframes, DrawFlow provides a smooth and intuitive experience.
https://github.com/rajput-vinay/drawflow
expressjs nextjs nodejs postgresql prisma-orm reactjs turborepo typescript websocket
Last synced: 3 months ago
JSON representation
🚀 DrawFlow is an interactive whiteboarding tool inspired by Excalidraw. It enables real-time drawing, collaborative editing, and seamless state management. Whether you're brainstorming ideas, diagramming workflows, or sketching wireframes, DrawFlow provides a smooth and intuitive experience.
- Host: GitHub
- URL: https://github.com/rajput-vinay/drawflow
- Owner: Rajput-vinay
- Created: 2025-01-11T14:46:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-06T07:11:53.000Z (over 1 year ago)
- Last Synced: 2026-01-03T13:19:11.876Z (6 months ago)
- Topics: expressjs, nextjs, nodejs, postgresql, prisma-orm, reactjs, turborepo, typescript, websocket
- Language: TypeScript
- Homepage:
- Size: 1.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 DrawFlow - A Collaborative Whiteboarding Tool
🚀 **DrawFlow** is an interactive whiteboarding tool inspired by Excalidraw. It enables real-time drawing, collaborative editing, and seamless state management. Whether you're brainstorming ideas, diagramming workflows, or sketching wireframes, DrawFlow provides a smooth and intuitive experience.
---
## ✨ Features
✅ **Real-time Collaboration** - Multiple users can draw simultaneously.
✅ **Shape Support** - Draw **circles, rectangles, lines, arrows, and freehand (pencil)**.
✅ **Color & Background Customization** - Change shape colors and background.
✅ **Save & Load Drawings** - Store and retrieve your work.
✅ **Smooth UI/UX** - Built with performance and responsiveness in mind.
---
## 🛠️ Tech Stack
- **Monorepo Architecture**: Managed with **Turborepo** 🏗️
- **Backend**: **Node.js + Express.js** ⚡
- **Real-time Collaboration**: Powered by **WebSockets** 🔄
- **Frontend**: **Next.js + TypeScript** 🖥️
- **Database**: **PostgreSQL + PrismaORM** 📊
---
## 🚀 Getting Started
### 📌 Prerequisites
- Node.js (v18+ recommended)
- PostgreSQL installed and running
- pnpm (for Turborepo)
### 📥 Installation
1. **Clone the repository**
```sh
git clone https://github.com/Rajput-vinay/drawFlow.git
cd drawflow
2. **Install Dependencies**:
```bash
pnpm install
3. **Set Up Environment Variables: Create a .env file in the root directory and add the following**:
```bash
PORT = 8000
DATABASE_URL=your_postgresSql_database_url
JWT_SECRET=your_jwt_secret
NEXT_PUBLIC_API_URL = 'your next public api url'
NEXT_PUBLIC_WS_URL = "your websocket api uri"
4. **Start the Server**:
```bash
pnpm dev
## License 📜
This project is licensed under the [MIT License](LICENSE).
## Contact 📬
For feedback or inquiries, feel free to reach out:
- **Email**: [vinayrajput2004vr@gmail.com](mailto:vinayrajput2004vr@gmail.com)
- **LinkedIn**: [Vinay Rajput](https://www.linkedin.com/in/vinay-rajput-984668227/)