Drawnote
DrawNote 🖊️ | Real-Time Collaborative Whiteboard A real-time, room-based whiteboard app to sketch, discuss, and brainstorm ideas. Built using Turborepo, React, raw Canvas API, and a scalable Node.js + Express backend. Features secure JWT auth, Zod validation, Prisma + PostgreSQL database, and WebSocket-based live sync. Uses Tailwind CSS
DrawNote
🎥 Demo & Screenshots
📺 Demo Video:
https://github.com/user-attachments/assets/3ddfe3c9-c0b2-418d-a71b-813759d0fbe7
🖼️ Screenshots:
🖌️ Real-Time Collaborative Whiteboard
DrawNote is a real-time, collaborative whiteboard application designed for brainstorming, sketching, and team discussions. Users can join rooms and illustrate their ideas seamlessly using raw Canvas APIs.
🚀 Features
- 🎨 Canvas-Based Drawing: Intuitive and responsive drawing experience.
- 🏠 Room-Based Collaboration: Create or join rooms for real-time teamwork.
- 📡 Real-Time Updates: WebSockets-powered instant synchronization.
- 🔒 JWT Authentication: Secure user access and session management.
- 🛠 Scalable Backend: Built with Prisma and PostgreSQL for efficiency.
- 📏 Zod Validation: Ensures structured and reliable data flow.
- 📂 Save & Export: Ability to save and export drawings.
- 📱 Responsive UI: Works across devices for seamless usage.
🛠 Tech Stack
Frontend
- Next.js: Interactive UI framework
- Canvas API: Core drawing functionality
Backend
- Express.js: API & real-time handling
- Node.js: JavaScript runtime
- WebSockets (ws): Real-time communication
- JWT: Secure authentication
- Zod: Input validation
Database
- PostgreSQL: Relational database
- Prisma: ORM for PostgreSQL
