ā§§ā§Ļ+
āĻĄāĻžāωāύāĻ˛â€™āĻĄ
āϏāĻŽāϞ⧰ āĻŽā§‚āĻ˛ā§āϝāĻžāĻ‚āĻ•āύ
ā§Š+ āĻšāĻŋāϚāĻžāĻĒ⧇ āĻŽā§‚āĻ˛ā§āϝāĻžāĻ‚āĻ•āύ āϕ⧰āĻž āĻšā§ˆāϛ⧇
āĻ¸ā§āĻ•ā§ā§°ā§€āύāĻļā§āĻŦāϟ⧰ āĻĒā§āϰāϤāĻŋāĻšā§āĻ›āĻŦāĻŋ
āĻ¸ā§āĻ•ā§ā§°ā§€āύāĻļā§āĻŦāϟ⧰ āĻĒā§āϰāϤāĻŋāĻšā§āĻ›āĻŦāĻŋ

āĻāχ āĻāĻĒā§â€ŒāĻŸā§‹ā§° āĻŦāĻŋāĻˇā§Ÿā§‡

Draw it is a real-time collaborative canvas application developed using Flutter for the frontend and Node.js + Express with WebSocket for backend synchronization. The app allows multiple users to draw simultaneously on a shared board, demonstrating expertise in both cross-platform UI development and real-time network communication.

🚀 Key Objective:
Enable seamless, real-time collaboration on a shared drawing board using a performant, event-driven architecture.

🧱 Tech Stack:

Flutter (Dart): Cross-platform mobile frontend with gesture handling and custom rendering

Node.js + Express.js: Backend server with WebSocket support for persistent bi-directional communication

WebSocket (ws): For real-time synchronization of strokes across users

CustomPainter: Efficient frame-by-frame drawing on canvas

Permission Handler & RepaintBoundary: Save drawings as images on device

đŸ–Œī¸ Core Features:

âœī¸ Shared Real-Time Drawing: All participants see each other's strokes instantly using WebSocket broadcast.

📡 Stateless WebSocket Server: Lightweight Node.js server maintains active socket connections and relays stroke events with low latency.

🎨 Canvas Engine: Touch gestures are converted into drawable vector paths and rendered using Flutter's CustomPainter.

📁 Export Canvas: Users can save their artwork as an image

🔧 Modular Architecture: Separate layers for drawing logic, server events, and platform integration.
āφāĻĒāĻĄā§‡â€™āϟ āϕ⧰āĻž āϤāĻžā§°āĻŋāĻ–
ā§¨ā§Ž-ā§Ļ⧝-⧍ā§Ļ⧍ā§Ģ

āĻĄā§‡āϟāĻž āϏ⧁⧰āĻ•ā§āώāĻž

āĻŦāĻŋāĻ•āĻžāĻļāĻ•ā§°ā§āϤāĻžāϏāĻ•āϞ⧇ āφāĻĒā§‹āύāĻžā§° āĻĄā§‡āϟāĻž āϕ⧇āύ⧇āĻ•ā§ˆ āϏāĻ‚āĻ—ā§ā§°āĻš āφ⧰⧁ āĻļā§āĻŦā§‡ā§ŸāĻžā§° āϕ⧰⧇ āĻ¸ā§‡ā§ŸāĻž āĻŦ⧁āϜāĻŋ āĻĒā§‹ā§ąāĻžā§° āϜ⧰āĻŋ⧟āϤ⧇ āϏ⧁⧰āĻ•ā§āώāĻž āφ⧰āĻŽā§āĻ­ āĻšā§ŸāĨ¤ āĻĄā§‡āϟāĻžā§° āĻ—ā§‹āĻĒāĻ¨ā§€ā§ŸāϤāĻž āφ⧰⧁ āϏ⧁⧰āĻ•ā§āώāĻž āĻĒā§ā§°āĻŖāĻžāϞ⧀ āφāĻĒā§‹āύāĻžā§° āĻŦā§āĻ¯ā§ąāĻšāĻžā§°, āĻ…āĻžā§āϚāϞ āφ⧰⧁ āĻŦāϝāĻŧāϏ⧰ āĻ“āĻĒā§°āϤ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āϕ⧰āĻŋ āĻ­āĻŋāĻ¨ā§āύ āĻšâ€™āĻŦ āĻĒāĻžā§°ā§‡āĨ¤ āĻŦāĻŋāĻ•āĻžāĻļāĻ•ā§°ā§āϤāĻžāĻ—ā§°āĻžāĻ•ā§€ā§Ÿā§‡ āĻāχ āϤāĻĨā§āϝāĻ–āĻŋāύāĻŋ āĻĒā§ā§°āĻĻāĻžāύ āϕ⧰āĻŋāϛ⧇ āφ⧰⧁ āϏāĻŽā§Ÿā§° āϞāϗ⧇ āϞāϗ⧇ āĻā§ŸāĻž āφāĻĒāĻĄā§‡â€™āϟ āϕ⧰āĻŋāĻŦ āĻĒāĻžā§°ā§‡āĨ¤
āϤ⧃āĻ¤ā§€ā§Ÿ āĻĒāĻ•ā§āώ⧰ āϏ⧈āϤ⧇ āϕ⧋āύ⧋ āĻĄā§‡āϟāĻž āĻļā§āĻŦ⧇āϝāĻŧāĻžā§° āϕ⧰āĻž āύāĻžāχ
āĻŦāĻŋāĻ•āĻžāĻļāĻ•ā§°ā§āϤāĻžāχ āĻĄā§‡āϟāĻž āĻļā§āĻŦā§‡ā§ŸāĻžā§° āϕ⧰āĻžā§° āĻŦāĻŋāĻˇā§Ÿā§‡ āϕ⧇āύ⧇āĻ•ā§ˆ āĻ˜ā§‹āώāĻŖāĻž āϕ⧰⧇ āϏ⧇āχ āĻŦāĻŋāĻˇā§Ÿā§‡ āĻ…āϧāĻŋāĻ• āϜāĻžāύāĻ•
āϕ⧋āύ⧋ āĻĄā§‡āϟāĻž āϏāĻ‚āĻ—ā§ā§°āĻš āϕ⧰āĻž āĻšā§‹ā§ąāĻž āύāĻžāχ
āĻŦāĻŋāĻ•āĻžāĻļāĻ•ā§°ā§āϤāĻžāχ āĻĄā§‡āϟāĻž āϏāĻ‚āĻ—ā§ā§°āĻš āϕ⧰āĻžā§° āĻŦāĻŋāĻˇā§Ÿā§‡ āϕ⧇āύ⧇āĻ•ā§ˆ āĻ˜ā§‹āώāĻŖāĻž āϕ⧰⧇ āϏ⧇āχ āĻŦāĻŋāĻˇā§Ÿā§‡ āĻ…āϧāĻŋāĻ• āϜāĻžāύāĻ•
Play āĻĒā§°āĻŋ⧟āĻžāϞ⧰ āύ⧀āϤāĻŋ āĻ…āύ⧁āϏ⧰āĻŖ āϕ⧰āĻŋāĻŦāϞ⧈ āĻŦāĻĻā§āϧāĻĒā§°āĻŋāϕ⧰

āύāϤ⧁āύ āĻ•āĻŋ āφāϛ⧇

Minor Changes

āĻāĻĒā§° āϏāĻŽā§°ā§āĻĨāύ

āĻŦāĻŋāĻ•āĻžāĻļāĻ•ā§°ā§āϤāĻžā§° āĻŦāĻŋāĻˇā§Ÿā§‡
Purvesh Dnyaneshwar Shinde
droiddecor@gmail.com
Sector 24, Juinagar Sanpada Mahalaxmi CHS, B-22, 3-14 Navi Mumbai, Thane, Maharashtra 400705 India
undefined

Droid Decorā§° āĻĻā§āĻŦāĻžā§°āĻž āφ⧰⧁ āĻ…āϧāĻŋāĻ•