Draw it

Draw it là ứng dụng canvas cộng tác thời gian thực được phát triển bằng Flutter cho giao diện người dùng và Node.js + Express với WebSocket để đồng bộ hóa giao diện người dùng. Ứng dụng cho phép nhiều người dùng vẽ cùng lúc trên một bảng dùng chung, thể hiện chuyên môn trong cả phát triển giao diện người dùng đa nền tảng và giao tiếp mạng thời gian thực.

🚀 Mục tiêu chính:

Cho phép cộng tác liền mạch, thời gian thực trên một bảng vẽ dùng chung bằng kiến ​​trúc hiệu suất cao, hướng sự kiện.

🧱 Tech Stack:

Flutter (Dart): Giao diện người dùng di động đa nền tảng với xử lý cử chỉ và kết xuất tùy chỉnh

Node.js + Express.js: Máy chủ phụ trợ với hỗ trợ WebSocket để giao tiếp hai chiều liên tục

WebSocket (ws): Để đồng bộ hóa nét vẽ theo thời gian thực giữa nhiều người dùng

CustomPainter: Vẽ từng khung hình hiệu quả trên canvas

Permission Handler & RepaintBoundary: Lưu bản vẽ dưới dạng hình ảnh trên thiết bị

🖌️ Tính năng cốt lõi:

✍️ Vẽ theo thời gian thực được chia sẻ: Tất cả người tham gia đều có thể nhìn thấy nét vẽ của nhau ngay lập tức bằng cách sử dụng WebSocket Broadcast.

📡 Máy chủ WebSocket không trạng thái: Máy chủ Node.js nhẹ duy trì các kết nối socket đang hoạt động và chuyển tiếp các sự kiện nét vẽ với độ trễ thấp.

🎨 Canvas Engine: Các cử chỉ chạm được chuyển đổi thành các đường dẫn vectơ có thể vẽ và được kết xuất bằng CustomPainter của Flutter.

📁 Xuất Canvas: Người dùng có thể lưu tác phẩm nghệ thuật của mình dưới dạng hình ảnh

🔧 Kiến trúc mô-đun: Các lớp riêng biệt để vẽ logic, sự kiện máy chủ và tích hợp nền tảng.